【问题标题】：Why do element selectors supersede the :host selector in custom elements with shadow DOM为什么元素选择器会取代带有影子 DOM 的自定义元素中的 :host 选择器
【发布时间】：2019-07-16 04:46:40
【问题描述】：

如果您创建一个带有阴影根的自定义元素，并使用 :host 选择器向其添加样式规则：

<style>
    :host {
        color: red;
    }
</style>

然后在 light DOM 中为自定义元素添加样式，使用元素选择器：

 <style>
    custom-element {
        color: blue;
    }
</style>

元素选择器中的样式取代了:host 选择器中的样式。这可以说是理想的行为——但我很好奇为什么这是真的……如果:host 是一个伪类，它不应该比custom-element 具有更高的特异性，并优先吗？如果这是规则的一个例外，它是否记录在某处的规范中？

See JsFiddle Example

【问题讨论】：

CMIIW，但情况可能并非如此。如果您检查该元素，您会注意到:host 与custom-element 具有相似的特异性。如果它被覆盖，它将被划掉。 screenshot inspect

标签： css css-selectors shadow-dom css-specificity

【解决方案1】：

除了@Supersharp 所说的以外，请这样想：

:host 的使用类似于所有内置元素的浏览器默认样式。

当您添加 ANY CSS 时，您会覆盖默认值。

这就是 CSS 的工作原理，我很高兴它确实如此。

【讨论】：

【解决方案2】：

这是真的，因为这是您所说的理想行为。

它按照CSS Scoping Module Level 1 规范的要求实现：

当比较两个具有不同树上下文的声明时，对于正常规则，在包含阴影的树顺序中较早的声明获胜，而对于重要规则，在包含阴影的树顺序中较晚的声明获胜。

注意：这与作用域样式的工作方式相反。

【讨论】：