javascript - 如何在 shadow dom 中使用全局 css 样式

Question

Shadow dom 封装css样式，选择器不跨越shadow边界。

问题:如何在shadow dom中使用全局通用的css样式？
(假设有一些通用的 css 样式将在所有页面中使用(例如:font-family、h1、h2、clear、reset ...)，如何使其在 shadow dom 中工作？)

Answer 1

我刚刚遇到了与原始问题相同的问题，即:定义一次一些全局规则，例如 <h3>元素并从中受益 ShadowDOM

不，css-variables 不适合这个东西，因为即使我已经定义了一次，比方说，font和 color <h3> 的变量，我仍然需要检查每个阴影样式表并添加一个使用它们的 CSS 规则。

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

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