logo标签列表

改变 shadow dom 的 rem 大小

javascripthtmlcssshadow-dom
4

我正在使用影子DOM进行CSS隔离。 我希望rem字体大小在影子DOM中使用HTML元素的字体大小。

<div class="shadow-div">shadow DOM 字体（应该是100px）</div> 中的字体应该是 100px，但 rem 大小仍然是16px。

这里是一个简短的代码片段来演示我想要实现的功能。

<style>
  html {
    font-size: 16px;
  }
</style>
<div>light dom font</div>

<div id="root"></div>

<script>
  const root = document.getElementById('root');
  root.attachShadow({ mode: 'open' });

  const html = document.createElement('html')
  html.innerHTML = `
            <head>
                <style>
                    html {
                        font-size: 100px;
                    }

                    .shadow-div {
                        font-size: 1rem;
                    }
                </style>
            </head>
            
            <body>
                <div class="shadow-div">shadow dom font (should be 100px)</div>
            </body>
        `;

  root.shadowRoot.appendChild(html);
</script>

那么从.shadow-div中删除font-size，还是明确将其设置为inherit呢？ - CBroe
1个回答
9

shadowRoot不是文档，因此没有<html><head><body>标记；
shadowRoot更像是DocumentFragments

您可以使用:host选择器来为阴影内容设置样式；由于阴影DOM是封装的，因此没有必要使用类来定位那个DIV

REM始终基于html定义；在组件内部使用em

还要注意，可继承属性（如color）会“流传”到组件中，并在shadowDOM中显示样式（font-size也是如此，但在此代码中重载它）。
请参见：https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/

这简化了您的代码：

<style>
  html { font-size: 10px }
  body { font-size: 3rem; color:green }
</style>

<div>3rem body font-size = 3 * html font-size</div>
<div id="root"></div>

<script>
  document.getElementById('root')
    .attachShadow({ mode: 'open' })
    .innerHTML = `<style>
                    :host { font-size: 50px }
                    div   { font-size: 2rem }
                    p     { font-size: .5em }
                 </style>
                 50px Component font-size
                 <div>2rem = 2 * html font-size = 20px</div>
                 <p>.5em = .5 * :host font-size = 25px</p>`;
</script>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接