Light DOM 样式级联到 shadow DOM答案

【问题标题】：Light DOM style cascades down to the shadow DOMLight DOM 样式级联到 shadow DOM
【发布时间】：2015-05-10 05:08:12
【问题描述】：

我用聚合物创建了一个自定义元素。当元素包含在h2 中时，它会继承h2 的boldness 和font-size。我需要我的组件不受外界影响，不受光 dom 样式的影响。如果 light DOM 级联下来，我该如何实现？

更具体地说，请查看以下内容：

【问题讨论】：

【解决方案1】：

这似乎是by design：

影子树的顶级元素继承自它们的宿主元素。

本例中的宿主元素是h2。

您需要在自定义元素的 CSS 中包含明确的尺寸和重量声明，以防止它从其宿主元素继承样式。

【讨论】：

我在这里看到了问题，但是，这有点令人困惑，让我解释一下原因：在我的自定义元素中，样式表中的 :host 引用 x-component 而不是 h2 .当我为:host 设置样式时，这些样式将应用于x-component。然而，另一个问题是我有一个动态修改 DOM 的 chrome 扩展，我需要样式保持一致。我正在考虑在我的组件中包含一个重置脚本。你怎么认为？谢谢。

【解决方案2】：

您可以在 :host 中使用 all: initial; 将 CSS 重置为浏览器默认值

:host {
    all: initial;
}

IE 或 Edge 不支持，但 shadow DOM 也不支持。

另一种选择是在您的 Web 组件中使用 CSS 重置，例如 normalize.css

显然有浏览器优化来处理多个 Web 组件中的相同 CSS，因此它并不像听起来那么低效。

【讨论】：