我们知道我们可以设置font-size在 html作为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 不同，它不能设置样式。
能否让shadow DOM中节点的rem基础字体可变可控？
最佳答案
除非我遗漏了什么rem值始终基于为<html> 设置的字体大小。像这样的标签:
html {
font-size: 100px;
}
同上尺寸1rem等于100px .
这是我设置 font-size 的示例对于 html到 4px。然后使用 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是12px；
font-size对于 body和 :host对 rem 没有任何影响尺寸。只有 font-size在<html>标签确实如此。
关于javascript - rem 在 web 组件影子 dom 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55236668/