轻型DOM风格级联到阴影DOM

Question

我用聚合物创建了一个自定义元素。当元素包含在h2中时，它会继承h2的{​​{1}}和boldness。我需要保护我的组件免受外界影响而不受轻型dom风格的影响。如果轻型DOM级联，我怎样才能实现这一目标？

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

Answer 1

这似乎是by design：

  

影子树的顶级元素继承自其主机元素。

在这种情况下，主机元素是h2。

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

Answer 2

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

:host {
    all: initial;
}

IE或Edge不支持，但影子DOM都不支持。

另一种选择是在您的Web组件（例如normalize.css

中使用CSS重置）

显然，已经针对浏览器进行了优化，以处理多个Web组件中的相同CSS，因此其效率没有听起来那么低。