光 DOM 风格层叠到阴影 DOM

Question

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

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

Answer 1

这似乎是 by design:

The top-level elements of a shadow tree inherit from their host element.

本例中的宿主元素是 h2。

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

Answer 2

您可以使用 :host

中的 all: initial; 将 CSS 重置为浏览器默认值

:host {
    all: initial;
}

IE 或 Edge 不支持，但阴影也不支持 DOM。

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

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

Light DOM style cascades down to the shadow DOM