Eri*_*ric 3 javascript css font-size web-component shadow-dom
我们知道我们可以将font-sizeon设置html为rem普通 DOM 节点的基础，我使用这个技巧使我的应用程序的字体更加灵活，可以通过 js 动态更改。
然而，当我创建一个 web 组件时，我发现rem里面的 shadow DOM 总是指 16px，即使我尝试*{ font-size:72px }在 shadow 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 不同，它不能设置样式。
是否可以使 shadow DOM 中节点的 rem 基础字体可变且可控？
除非我遗漏了某些东西，否则rem值总是基于为<html>标签设置的字体大小，如下所示：
html {
font-size: 100px;
}
与上面的大小1rem相等100px。
这是我将font-sizefor设置为html4px的示例。然后rem在组件中使用值。
html {
font-size: 100px;
}
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;
}运行它，然后查看 DevTools 计算选项卡。您将看到： 1. 文本I am 2rem = 2*browser default的字体大小仅为 8px 2.文本的字体大小为I am 3rem = 3*browser default12px；
将font-size用于body和:host上没有任何影响rem的大小。只有font-size在<html>标签一样。