如何将通用CSS类应用于阴影元素？

问题描述

如here所指出：

由于样式隔离是Shadow DOM的一项功能，因此您无法定义将在Shadow DOM范围内应用的全局CSS规则。

是否有任何方法可以在某个全局styles.css文件中全局定义简单的CSS类（例如，我们可以在各种地方使用它们并在各个组件中重用它们）？

当前，简单的答案是向我们定义的每个单个组件添加一个相应的<link href="styles.css">标签。 proposed here允许网络组件使用引导程序类，here再次支持离子类。那是个好方法吗？如果我们在数十个或数百个组件中包含大型styles.css，这在性能方面不是很糟糕吗？

解决方法

Constructable Stylesheets是解决该问题的建议。

简而言之，这是一种在组件之间共享相同样式表而无需每次都请求样式表的方法。目前，它仅是Chrome，但有一个polyfill，至少有Firefox似乎support this proposal。 ,

也许可以帮助您。从这个连结 https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

您具有以下条件：

内部样式与外部样式

在上面的示例中，我们使用 元素，但完全有可能通过引用一个 而是来自元素的外部样式表。

例如，从我们的代码中查看此代码 popup-info-box-external-stylesheet示例（请参见源代码）：

// Apply external styles to the shadow dom
const linkElem = document.createElement('link');
linkElem.setAttribute('rel','stylesheet');
linkElem.setAttribute('href','style.css');

// Attach the created element to the shadow dom
shadow.appendChild(linkElem);

请注意，元素不会阻止阴影根的绘制，因此 样式表中可能会出现一些未样式化内容（FOUC） 加载。

许多现代浏览器都对标签进行了优化 从公共节点克隆或具有相同的文本，以允许它们 共享一个后备样式表。通过这种优化 内部和外部样式的表现应该相似。

为了使其尽可能独立和模块化，我会提出类似的建议：

let myStyles = querySelector('rel[href="style.css"]');
shadowDOM.appendChild(myStyles);

通常，除了将样式直接添加到阴影DOM之外，您没有其他选择。