正确的方法应用全局风格融阴影DOM(Correct way to apply global styl

这个问题类似于其他一些在计算器上，但我找不到任何答案描述适用于我的情况和非过时的方法（和我开始想，也许有对这种情况没有什么好的解决办法）。

比方说，我们有一些main.css的文件，其中包括按钮，列表，链接等常用的样式。 所以，这只是一些标准的CSS文件，其中包含我们想要在整个应用程序重用常见的款式。 我们要应用相同的样式与影子DOM Web组件。

有几个方法，我知道，来实现这一目标：

1. 使用过时的方法之一：::阴影，>>>，/深/选择器。 但是，这些选择是由现在已废弃，所以我想这不是前进与不错的办法。
2. 使用CSS变量。 这种做法有利于定制的目的，如果我们需要设置一些属性。 但是，如果我们想从迁移文件的main.css 10-20常见的样式是太复杂了。
3. 使用@import声明或内阴影DOM的“链接”标签。 它会工作，但它会复制所有样式的所有组件。 如果我们有10个Web组件，我们将结束的一模一样款式10名重复。 这听起来不像是足够好的解决方案了。 特别是如果我们有很多共同的风格，听起来像它可以从性能的角度来看不好解决。
4. 不要使用阴影DOM在所有和使用全局样式:)但它不是当前问题的解决方案。

我也查了如何在角框架解决同样的问题（我查角第5版）。 当我设置的封装行为到本机，它只是实际复制样式（如在＃3如上所述），我认为是不是最好的方式（但也许是最好的现有方式）。

因此，没有人知道是否有任何其他方式来解决这个问题，而上述缺点描述？ 它只是听起来像影子DOM的电流缺点比它试图解决带来更多的问题。

Answer 1:

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

1. 无论您应用CSS样式到n个元素的主文档中，或以1元的N影子DOM，样式将被复制反正到整个n个元素。

2. 如果您在正影子DOM导入文档n次，金正日将实际上只能装载一次，并通过浏览器的缓存重用。

在此之后，IL会依赖于浏览器的实现影子DOM和CSS样式的，你应该会看到一个性能下降只有几千阴影DOM的。

---

2019更新的Chrome 73+和60+歌剧院

现在你可以直接实例化一个CSSStyleSheet对象，并将其分配给不同的阴影的DOM。

这样，HTML不会被复制。

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

你也可以把它应用到全球的文件：

document.adpotedStyleSheets = [css]

另一个优点是，在样式表的更新将被应用到通过了所有影的DOM（并记录）。

 css.replaceSync( '.color { color: red }' )

文章来源: Correct way to apply global styles into Shadow DOM