考虑一下,我很少使用Shadow DOM来隐藏其内部div-soup和布局的元素。
即使它们有所不同,但它们共享相同的CSS样式表,因为它们使用应该以一致方式设置样式的相同元素集。例如,这可能是CSS框架( bootstrap )。
问题在于此样式表很大。
在许多Shadow Root(在SD V1中)之间共享如此大的样式表的最有效方法是什么?
最佳答案
从2019年开始,可构造样式表是将样式表通常应用于影子DOM和Web组件的方法。阅读更多about it here。
上一个答案:
您可以在Shadow DOM中定义的import
元素的第一行使用<style>
CSS规则:
<div id=D1></div>
<template id=T1>
<style>
@import url( '/css/stylesheet.css' )
</style>
...
</template>
然后在Shadow DOM根目录中导入
<template>
content
:var root = D1.attachShadow( {mode: open } )
root.appendChild( T1.content.cloneNode( true ) )