如何将常见的CSS类应用于阴影元素?

Constructable Stylesheets 正是为了解决这个问题。

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

也许它能帮助你。从这个链接 https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

您有以下内容:

内部风格与外部风格

在上面的示例中,我们使用 元素,但完全有可能通过引用 而是从元素中提取外部样式表。

例如,看看我们的代码 弹出信息框外部样式表示例(请参阅源代码):

// 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);

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