html – 基于Shadow DOM根的字体大小css-values

问题简短说明：

我正在寻找一种方法来设置基于字体大小的值(类似于将某些属性设置为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值)组合.

解决方法

在查看Web Component文档之后.你想要做的事情就像一个Web组件.请参见以下Web组件示例.

在你的文件标题中

<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网络浏览器中启用了正确的标志时才有效.默认情况下不会运行,需要用户启用正确的测试版才能使用.即使在内部网络中,我也不会推荐使用网络组件,因为它仍然是非常多的测试版,您将会遇到许多内部用户维护这些问题.用户可以随时找到重新设置浏览器的方法.用户打破一切新鲜光泽.

原文地址：https://www.jb51.cc/html/230423.html

html – 基于Shadow DOM根的字体大小css-values

解决方法

相关推荐