轻DOM风格级联到阴影DOM

Question

我用聚合物制作了一个定制元素。当元素包含在h2中时，它继承了h2的boldness和font-size。我需要将组件从外部世界保护起来，而不受轻量级样式的影响。如果轻型dom下降，我如何实现这一点？

更具体而言，请查看以下内容：

​

Answer 1

这似乎是精心设计

阴影树的顶层元素继承于它们的宿主元素。

本例中的主机元素是h2。

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

Answer 2

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

:host {
    all: initial;
}

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

另一个选择是在web组件(如normalize.css )中使用CSS重置。

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