我正在寻找一种方法来设置基于字体大小的值(类似于将某些属性设置为em值)在阴影dom中相对于影子主机的元素,而不管阴影dom中的父元素的字体大小如何.类似于rem值是如何工作的,但以阴影为根而不是html根.
这样做的原因是能够将内容像一个小部件(插入阴影dom)放在一个位置.如果基于字体大小的属性可以按照这种方式进行缩放,则可以在每个上下文中对整个小部件进行缩放,而无需设置大量的css值,使其适合每个位置.
长说明问题：
我正在寻找一种基于DOM中给定元素的文本大小(font-size)的方法,以便能够根据这个包装元素(适用于小部件等)来缩放该元素内的不同内容部分.这不仅仅是为了实际的文字,在font-size上通常都有很好的基础,所以元素的视觉布局与文本的大小(像填充,边框半径和阴影)一样缩放.如果一切都是基于em-values,这可能会有点凌乱.如果元素中有多个级别的字体大小,我想放大第一级而不改变第二级,我需要放大dom中第一级的em,同时减少任何第二级元素(基于第一级计算)使子元素的文本保持相同的大小.这在许多情况下不太适合.
一个很好的解决方案是在根EM(rem)基础上,所以改变dom的一个级别不会影响子元素.但是,如果我想放大/缩小这个包装元素(在一个地方)中的所有文本的大小,而不影响同一页面上的其他元素,我需要放大/缩小所有字体大小的rem值该包装元素内的元素.
我最近开始使用Shadow DOM和模板查找Web Components.在模板标签中,css被封装是非常好的,因为该框/窗口部件/组件的设计可以自己设计,而不必考虑其余的设计,不必要的继承值等.最后一个很好的方式使独立的组件建立一个网页.但是,如果我可以为模板本身设置一种模板根字体大小,那将会很好.因此,如果我将模板中的某些元素设置为font-size 2rem(或任何其他类似单元),那么该元素的font-size将是模板的根字体大小的2倍,而不管主机中的字体大小如何使用该模板的元素,以及页面根(html元素)的字体大小.
当我使用模板中的rem值进行测试时,它仍然基于页面根(html标签)font-size.我也测试了vw值,但这也是基于整个视口,而不仅仅是封装的区域(阴影根).
我已经看了很多关于Shadow DOM的文章,但是我在这个问题上找不到任何解决方案.有什么建议么？
会发生什么(简化的例子)：
<html style="font-size: 16px">
<body style="font-size: 12px">
I am 12px large
<!-- em,based on the body in this case -->
<div style="font-size: 1.5em">
I am 18px large
<div style="font-size: 1.5em">
I am 27px large
</div>
</div>
<!-- rem,based on the styles of the html element -->
<div style="font-size: 1.5rem">
I am 24px large
<div style="font-size: 1.5rem">
I am 24px large
</div>
</div>
</body>
</html>
我想要的是：
<html style="font-size: 16px">
<body style="font-size: 12px">
I am 12px large
<div style="font-size: 1.5em">
I am 18px large
</div>
<div style="font-size: 1.5rem">
I am 24px large
</div>
<template> <!-- Simulates that it is inserted into the DOM by using shadow elements -->
<style>
:root{ /* Or something like that */
font-size: 20px; /* This is the simulated "template root fontsize" */
}
</style>
<div style="font-size: 1.5trem"> <!-- Based on the template root fontsize -->
I am 30px large
<div style="font-size: 2trem">
I am 40px large
</div>
</div>
</template>
</body>
</html>
这将给出一个位置(上面的示例的根部分)来控制该组件内的所有相对字体大小,然后可以将其与非相对字体大小(如px或其他正常css值)组合.
解决方法
<link rel="import" href="web_component_name.html"></link>
在你身上你会有
<my-web-component>Bob</my-web-component>
您的Web组件将具有自己的文件.
<html> <template id="naMetagTemplate"> <style> .outer { border: 2px solid brown; border-radius: 1em; background: red; font-size: 20pt; width: 12em; height: 7em; text-align: center; } .boilerplate { color: white; font-family: sans-serif; padding: 0.5em; } .name { color: black; background: white; font-family: "Marker Felt",cursive; font-size: 45pt; padding-top: 0.2em; } </style> <div class="outer"> <div class="boilerplate"> Hi! My name is </div> <div class="name"> <content></content> </div> </div> </template> <script> var importDoc = document.currentScript.ownerDocument; var nameBadgePrototype = Object.create(HTMLElement.prototype); nameBadgePrototype.createdCallback = function() { var shadow = this.createShadowRoot(); var template = importDoc.querySelector('#naMetagTemplate'); shadow.appendChild(template.content.cloneNode(true)); }; document.registerElement("my-web-component",{ prototype: nameBadgePrototype }); </script> </html>
你想要做的事情的例子和你真正想要什么不相符.经过几次你的回复,我看到你想做Web Components.这不是你在示例中显示你正试图做什么的.此外,此代码只有在您的Chrome Canary网络浏览器中启用了正确的标志时才有效.默认情况下不会运行,需要用户启用正确的测试版才能使用.即使在内部网络中,我也不会推荐使用网络组件,因为它仍然是非常多的测试版,您将会遇到许多内部用户维护这些问题.用户可以随时找到重新设置浏览器的方法.用户打破一切新鲜光泽.
