考虑一下,我很少使用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 ) )

09-10 09:05
查看更多