小编web*_*man的帖子

更改阴影 dom rem 大小

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

中的字体<div class="shadow-div">shadow DOM font (should be 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> …
Run Code Online (Sandbox Code Playgroud)

html javascript css shadow-dom

4
推荐指数
1
解决办法
2756
查看次数

标签 统计

css ×1

html ×1

javascript ×1

shadow-dom ×1