Question

我们知道我们可以在普通DOM节点中将var audio = $('audio')[0]; // alternative: $('audio').get(0); audio.pause(); audio.currentTime = 0; audio.play();上的font-size设置为html的基础，并且我使用此技巧使我的应用程序字体更加灵活，动态更改js。

但是，当我创建一个Web组件时，即使在阴影DOM中尝试添加样式rem时，我仍然发现阴影DOM中的rem始终引用16px。常见的浏览器默认字体大小为16px。

这是一个简单的演示： https://jsfiddle.net/qmacwb6r/

*{ font-size:72px }

我还尝试在控制台中调用<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>。

对于普通DOM节点，它返回HTMLElement，而对于阴影DOM节点，它返回ShadowRoot，与HTMLElement不同，它不能设置样式。

是否可以使影子DOM中的节点的rem基本字体可变且可控？

Answer 1

除非我根据rem标记设置的字体大小，总是丢失<html>值，如下所示：

html {
  font-size: 100px;
}

上述大小的1rem等于100px。

这里是一个示例，其中我将font-size的{{1}}设置为4px。然后在组件中使用html值。

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*broser default</div>
<div class="rem3">I am 3rem = 3*broser 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;
}

Web组件阴影dom中的rem

1 个答案: