如何将常见的CSS样式应用到许多Shadow Roots？ [英] How to apply common CSS styles to many Shadow Roots at once?

问题描述

考虑，我有几个元素使用Shadow DOM来隐藏他们内部的div和汤姆布局。

Consider, I have few elements which use Shadow DOM to hide their internal div-soup and layout.

即使艰难，他们有着相同的CSS风格表，因为他们使用相同的一组元素，应该以一致的方式风格。例如，这可以是一个CSS框架（bootstrap）。

Even tough they are different, they share the same CSS style sheet, as they are using the same set of elements that are supposed to be styled in consistent manner. This could be, for example, a CSS framework (bootstrap).

问题是这个样式表是相当大的。

The problem is that this style sheet is pretty big.

在许多Shadow Roots（在SD V1中）之间共享这种大样式表的最有效的方法是什么？

What is the most efficient way to share such big style sheet between many Shadow Roots (in SD V1)?

推荐答案

p>您可以在阴影中定义的< style> 元素的第一行使用 import DOM：

You can use an import CSS rule at the first line of a <style> element defined in the Shadow DOM:

<div id=D1></div>
<template id=T1>
   <style>
      @import url( '/css/stylesheet.css' )
   </style>
   ...
</template>

然后导入< template> $ shadow $根目录中的code> content ：

Then import the <template> content in the Shadow DOM root:

var root = D1.attachShadow( {mode: open } )
root.appendChild( T1.content.cloneNode( true ) )

这篇关于如何将常见的CSS样式应用到许多Shadow Roots？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！