轻型DOM样式级联为阴影DOM

Question

我已经用聚合物创建了一个自定义元素。当元素包含在h2中时，它将继承h2的boldness和font-size。我需要使我的组件避开外界，并且不受光影风格的影响。如果轻型DOM级联下来，如何实现？

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

Answer 1

这似乎是by design：

影子树的顶级元素从其宿主元素继承。

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

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

Answer 2

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

:host {
    all: initial;
}
在IE或Edge中不受支持，但影子DOM都不支持。

另一种选择是在Web组件（例如normalize.css）中使用CSS重置>

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