如何将常见的 CSS 类应用于阴影元素？答案

【问题标题】：How to apply common CSS classes to shadow elements?如何将常见的 CSS 类应用于阴影元素？
【发布时间】：2020-12-25 18:35:24
【问题描述】：

正如here指出的那样：

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

有没有办法在一些全局的styles.css 文件（例如）中全局定义简单的 CSS 类，我们可以在各种地方使用并在单个组件中重复使用它们？

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

【问题讨论】：

标签： html css web-component shadow-dom constructable-stylesheet

【解决方案1】：

Constructable Stylesheets 正是为了解决这个问题而提出的建议。

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

【讨论】：

甜蜜！我会在接下来的几天里尝试一下！

【解决方案2】：

也许它可以帮助你。从这个链接 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);

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

【讨论】：