Javascript ：主机通过通用选择器css获取OVERIRDEN

我们在一个通用样式文件中有CSS重置

（边距：0px；填充：0px；）

，我们将其作为一个组件编写，并将其作为我们正在开发的其他组件的一部分

我们使用的是如下所示的通用选择器

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

}

在我们的每个组件上，我们都有一个

：host

样式，我们试图用它覆盖此颜色

:host{
color:yellow
}

正如我们所期望的那样，

：主机

比通用选择器具有更高的特异性，奇怪的是，事实并非如此。通用选择器样式正在覆盖我们的

：主机
样式

我们只想让我从组件z-foo（在所附的plnkr示例中）变成绿色样式

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


它的粉红色表示它仍然被通用选择器覆盖


让我变绿
：主持人{
颜色：绿色；
}
我是z-foo，我是格林。
类ZFoo.Element{
静态get是（）{
返回“z-foo”；
}
}
customElements.define（ZFoo.is，ZFoo）；

正如我们所期望的那样，
：主机
比通用选择器具有更高的特异性，奇怪的是，事实并非如此。通用选择器样式将覆盖我们的：hoststyles

这是一个错误的推测。实际上，包含文档中定义的任何CSS选择器都将覆盖
：host
CSS规则

根据谷歌的数据：

外部样式总是胜过阴影DOM中定义的样式。例如，如果用户编写选择器
花式制表符{width:500px；}
，它将胜过组件的规则：
：主机{width:650px；}

作为解决方法，请使用
！重要信息
与
：主机结合使用
，如果需要

正如我们所期望的那样，
：主机
比通用选择器具有更高的特异性，奇怪的是，事实并非如此。通用选择器样式将覆盖我们的：hoststyles

这是一个错误的推测。实际上，包含文档中定义的任何CSS选择器都将覆盖
：host
CSS规则

根据谷歌的数据：

外部样式总是胜过阴影DOM中定义的样式。例如，如果用户编写选择器
花式制表符{width:500px；}
，它将胜过组件的规则：
：主机{width:650px；}

作为解决方法，请使用
！重要信息
与
：主机结合使用
，如果需要