为什么元素选择器取代具有阴影DOM的自定义元素中的：host选择器请参见JsFiddle示例

Question

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

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

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

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

元素选择器中的样式取代:host选择器中的样式。这可以说是理想的行为 - 但我很好奇为什么这是真的...如果:host是一个pseduo级别，它应该没有比custom-element更高的特异性，并优先考虑？如果这是规则的例外，它是否在某些地方的规范中有记录？

See JsFiddle Example

Answer 1

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

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

当比较具有不同树上下文的两个声明时，那么对于普通规则，包含阴影的树序中的声明获胜，而对于重要规则，稍后在包含阴影的树顺序中的声明获胜。

注意：这与范围样式的工作方式相反。

Answer 2

除了@Supersharp所说的以这种方式思考它：

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

添加任何CSS时，您将覆盖默认值。

这就是CSS的工作方式，我很高兴。