将全局样式应用于Shadow DOM的正确方法

Question

这个问题与StackOverflow上的其他问题类似，但我找不到任何适用于我的情况和非弃用方法的答案（我开始认为这种情况可能没有任何好的解决方案）。

假设我们有一些main.css文件，其中包含按钮，列表，链接等的常用样式。所以它只是一些标准的.css文件，其中包含我们希望在整个应用程序中重用的常见样式。我们希望使用Shadow DOM将相同的样式应用于Web组件。

我知道有几种方法可以实现这一目标：

1. 使用一种不推荐的方法：:: shadow，>>>，/ deep / selectors。但是那些选择器现在已经被弃用了，所以我想这不是一个好的方法来推进。
2. 使用css变量。如果我们需要设置一些属性，这种方法适用于自定义目的。但是如果我们想从main.css文件迁移10-20个常用样式，那就太复杂了。
3. 在Shadow DOM中使用@import语句或“link”标签。它会起作用，但会复制每个组件的所有样式。如果我们有10个Web组件，我们最终会得到10个完全相同样式的重复项。它听起来也不是一个好的解决方案。特别是如果我们有很多共同的风格，从性能的角度来看，它听起来可能是糟糕的解决方案。
4. 不要使用Shadow DOM并使用全局样式:)但它不是当前问题的解决方案。

我还检查了Angular Framework中如何解决相同的问题（我检查了Angular的第5版）。当我将封装行为设置为Native时，它实际上只是复制样式（如上面描述的＃3），我认为这不是最好的方式（但可能是目前最好的方式）。

那么，有没有人知道是否有任何其他方法来解决这个问题没有上述缺点？听起来像Shadow DOM的当前缺点带来了比它试图解决的更多问题。

Answer 1

解决方案3没有真正的缺点：

1. 无论是将CSS样式应用于主文档中的n个元素，还是将其应用于n Shadow DOM中的1个元素，该样式都将被复制到整个n个元素中。
2. 如果您在n Shadow DOM中导入文档n次，则实际上只会加载一次il并通过浏览器缓存重用。

在那之后，il将依赖Shadow DOM和CSS样式的浏览器实现，你应该看到只有数千个Shadow DOM的性能下降。

---

2019年Chrome 73+和Opera 60+的更新

现在，您可以直接实例化qazxsw poi对象并将其分配给不同的Shadow DOM。

这样HTML就不会重复了。

CSSStyleSheet

您还可以将其应用于全局文档：

var css = new CSSStyleSheet()
css.replaceSync( "@import url( main.css )" )
host.shadowRoot.adoptedStyleSheets = [css] 
host2.shadowRoot.adoptedStyleSheets = [css] 

另一个优点是样式表上的更新将应用于采用它的所有Shadow DOM（和文档）。

document.adpotedStyleSheets = [css]