В чем разница между обычными стилями компонентов и вложенными стилями хоста?

Question

Рассмотрим следующий стиль уровня компонента для компонента со значением инкапсуляции представления по умолчанию ViewEncapsulation.Emulated:

:host h2 {
    color: red;
}

. Это скомпилирует в следующий CSS:

[_nghost-c0] h2[_ngcontent-c0] {
    color: red;
}

Однако, если вы опустите селектор :host в правиле, ваш сгенерированный CSS будет таким:

h2[_ngcontent-c0] {
    color: red;
}

Есть ли поведенческая разница между этими двумя правилами CSS?Я понимаю, что использование :host само по себе для стилизации элемента компонента верхнего уровня, но как только вы вкладываете дочерние элементы, не является ли :host бессмысленным?

Answer 1

:host требуется только при стилизации самого компонента. Вам не нужно использовать его при создании селекторов для содержимого в нем.

Если вы добавите его к этому правилу (:host h2), вы просто увеличите специфичность правила (на случай, если вам нужно это сделать). [_nghost-c0] h2[_ngcontent-c0] более конкретно, чем h2[_ngcontent-c0] при расчете порядка, в котором применяется CSS.