:host 被通用 CSS 选择器覆盖

Question

我们在一个通用样式文件中重置了 CSS (margin:0px;padding:0px;)，我们将其作为一个组件编写，并作为我们正在开发的其他组件的一部分包含在内。

我们使用如下通用选择器

*,*:before,*:after{
color:pink

}

在我们的每个组件上，我们都有一个:host样式，我们试图用它来覆盖这个颜色

:host{
color:yellow
}

奇怪的是，我们期望:host比通用选择器有更多的特异性，但事实并非如此。通用选择器样式覆盖了我们的:host样式

我们只想要组件 z-foo 的 MAKE ME GREEN 样式（在附加的 plnkr 示例中）

尝试了多种方法，似乎没有任何效果

http://plnkr.co/edit/l8NSJT?p=preview

它是粉红色的，这意味着它仍然被通用选择器覆盖

*,*:before,*:after{
color:pink

}

Answer 1

奇怪的是，我们期望:host比通用选择器有更多的特异性，但事实并非如此。通用选择器样式会覆盖我们的 :hoststyles

这是一个错误的假设。实际上，包含文档中定义的任何 CSS 选择器都会覆盖:hostCSS 规则。

根据 Google 的Shadow DOM 演示：

外部样式总是胜过 Shadow DOM 中定义的样式。例如，如果用户编写选择器fancy-tabs { width: 500px; }，它将超越组件的规则：:host { width: 650px;}

作为解决方法，如果需要，可以!important结合使用。:host