Javascript 更改阴影dom rem大小

我使用阴影DOM进行CSS隔离。我希望

rem

字体大小在阴影DOM中使用HTML元素字体大小

shadowdom字体中的字体（应该是100px）

应该是

100px

，但rem大小仍然是

16px

下面是一个小代码片段，演示了我要做的事情

html{
字体大小：16px；
}
轻型dom字体
const root=document.getElementById（'root'）；
attachShadow（{mode:'open'}）；
常量html=document.createElement（'html'）
html.innerHTML=`
html{
字体大小：100px；
}
.影子分部{
字号：1rem；
}
阴影dom字体（应为100px）
`;
root.shadowRoot.appendChild（html）；
影子根不是文档，所以没有
标记

阴影根更像文档碎片

您可以根据
：host
选择器设置阴影内容的样式；而且，由于影子DOM是封装的，所以类不需要以一个DIV为目标

REM始终基于
html
定义；在组件内部使用em

还要注意可继承的属性，如
color
“涓流”到组件中，以及如何在shadowDOM中对内容进行样式化（
font size
也可以，但您在该代码的组件中重载了它）

见：

这将代码简化为：



html{字体大小：10px}
正文{字体大小：3rem；颜色：红色}
3rem正文字体大小=3*html字体大小
document.getElementById（'root'））
.attachShadow（{mode:'open'}）
.innerHTML=`
：主机{字体大小：50px}
div{font size:2rem}
p{字体大小：.5em}
50px组件字体大小
2rem=2*html字体大小=20px
.5em=.5*：主机字体大小=25px
`；
影子根不是文档，所以没有
标记

阴影根更像文档碎片

您可以根据
：host
选择器设置阴影内容的样式；而且，由于影子DOM是封装的，所以类不需要以一个DIV为目标

REM始终基于
html
定义；在组件内部使用em

还要注意可继承的属性，如
color
“涓流”到组件中，以及如何在shadowDOM中对内容进行样式化（
font size
也可以，但您在该代码的组件中重载了它）

见：

这将代码简化为：



html{字体大小：10px}
正文{字体大小：3rem；颜色：红色}
3rem正文字体大小=3*html字体大小
document.getElementById（'root'））
.attachShadow（{mode:'open'}）
.innerHTML=`
：主机{字体大小：50px}
div{font size:2rem}
p{字体大小：.5em}
50px组件字体大小
2rem=2*html字体大小=20px
.5em=.5*：主机字体大小=25px
`；
因此从
.shadow div
中删除
字体大小
，或将其显式设置为
继承
？因此从
.shadow div
中删除
字体大小
，或将其显式设置为
继承
…？