我们知道我们可以设置font-size on html as the rem基于普通 DOM 节点，我使用这个技巧使我的应用程序的字体更加灵活，可以通过 js 动态更改。
然而，当我创建一个Web组件时，我发现rem即使我尝试添加样式，影子 DOM 内部始终引用 16px*{ font-size:72px }在影子 DOM 内部。 16px是常见浏览器默认字体大小。
这是一个简单的演示：https://jsfiddle.net/qmacwb6r/
<html>
<head>
<script>
var template =`
<style>
* {
font-size: 72px;
}
div {
font-size:2rem;
}
</style>
<div>
I am 2rem = 2*broser default
</div>
`
class TestTemplate extends HTMLElement {
constructor(){
super();
this.rt = this.attachShadow({mode:"open"});
this.rt.innerHTML = template;
}
}
customElements.define("test-component", TestTemplate);
</script>
</head>
<body>
<test-component></test-component>
</body>
</html>
我也尝试过打电话getRootNode()在控制台中。
对于普通 DOM 节点，它返回 HTMLElement，而对于影子 DOM 节点，它返回 ShadowRoot，与 HTMLElement 不同，ShadowRoot 无法设置样式。
是否可以使shadow DOM中节点的rem基础字体可变且可控？
除非我错过了什么rem值是always基于设置的字体大小<html>像这样的标签：
html {
font-size: 100px;
}
有了上面的尺寸1rem等于100px.
这是我设置的示例font-size for html到 4 像素。然后使用rem组件中的值。
var template = `
<style>
:host, :root { font-size: 48px; }
.rem2 { font-size:2rem; }
.rem3 { font-size:3rem; }
</style>
<p>I am 48px Times</p>
<div class="rem2">I am 2rem = 2*browser default</div>
<div class="rem3">I am 3rem = 3*browser default</div>
`;
class TestTemplate extends HTMLElement {
constructor(){
super();
this.rt = this.attachShadow({mode:"open"});
this.rt.innerHTML = template;
}
}
customElements.define("test-component", TestTemplate);
html {
font: 4px Courier;
}
body {
font: 24px Tahoma;
}
<div>Before</div>
<test-component></test-component>
<div>After</div>
运行它，然后查看 DevTools 计算选项卡。你会看到：
1. 文本的字体大小I am 2rem = 2*browser default只有8px
2. 文本的字体大小I am 3rem = 3*browser default是 12 像素；
The font-size for body and :host没有任何影响rem尺寸。只有font-size in the <html>标签确实如此。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
