如何在影子dom中使用全局css样式

Question

阴影dom封装css样式,选择器不跨越阴影边界.

问题:如何在影子dom中使用全局常见的css样式？
(假设有一些常用的CSS样式将用于所有页面(例如:font-family,h1,h2,clear,reset ...),如何使它在阴影dom中工作？)

Answer 1

我刚刚遇到了与原始问题相同的问题，即：为任何/许多s 中的元素定义一次全局规则<h3>并从中受益ShadowDOM。

不，css-variables是不适合以及为了这件事，因为即使我定义一次，比方说，font和color变量<h3>，我仍然需要去在每一个阴影样式并添加CSS规则，消费它们。

在撰写本文时（是的，我们现在是 2019 年）最短的标准化解决方案确实是导入一些全球通用的 CSS。在 Chrome、Firefox 和 Anaheim (Edge on Chromium) 中完美运行。

它仍然需要@import在每个组件中添加一个规则，所以仍然很昂贵（从编码/维护 POV，样式表只获取一次），但这是我们现在可以支付的最低价格。

Answer 2

您可以通过 ::shadow 伪元素来完成此操作。像这样：

::shadow .redColor
{
    background-color: red;    
}

这会将样式应用于具有 .redColor 类的阴影树内的所有元素。

这篇精彩文章中的更多信息和其他样式可能性：Shadow DOM 201