Почему селекторы элементов заменяют селектор: host в пользовательских элементах с теневым DOM

Question

Если вы создаете пользовательский элемент с теневым корнем и добавляете к нему правила стилей с помощью селектора :host:

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

А затем добавляете стили в облегченном DOM для пользовательского элемента, используяселектор элемента:

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

Стили в селекторе элементов заменяют стили в селекторе :host.Возможно, это идеальное поведение - но мне любопытно, почему это так ... если :host является псевдо-классом, разве он не должен иметь более высокую специфичность, чем custom-element, и иметь приоритет?Если это исключение из правила, задокументировано ли оно где-нибудь в спецификациях?

См. Пример JsFiddle

Answer 1

В дополнение к тому, что сказал @Supersharp, подумайте об этом так:

Использование :host аналогично стилю браузера по умолчанию для всех встроенных элементов.

Когда выдобавьте ЛЮБОЙ CSS, вы переопределяете значения по умолчанию.

Именно так работает CSS, и я очень рад, что это так.

Answer 2

Это правда, потому что это идеальное поведение, как вы заявили.

Он реализован в соответствии с требованиями CSS Scoping Module Level 1 Спецификация:

При сравнении двух объявлений, которые имеют разные контексты дерева, для нормальных правил выигрывает объявление, ранее в порядке, включающем тень, а для важных правил - объявление, которое приходит позже в порядке, включающем тень.

Примечание: Это противоположно тому, как работают стили с областями видимости.