如何解决更改 shadow 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>
`;
root.shadowRoot.appendChild(html);
</script>
解决方法
shadowRoots 不是文档,所以没有 <html><head><body>
标记;
shadowRoots 更像 DocumentFragments
您根据 :host
选择器设置阴影内容的样式;并且由于 shadow DOM 是封装的,因此类就不需要针对那个 DIV
REM 始终基于 html
定义;在组件内部使用 em 代替
另请注意可继承的属性,例如color
“滴入”到组件中,并do在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:red }
</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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。