Можно ли стилизовать с помощью: host с Encapsulation.None в Angular?

Question

Я пытаюсь использовать :host с Encapsulation.None, но стили не применяются.

Должно ли это работать и если да, то как?

Пример ниже, есть 2 идентичных дочерних компонента, за исключением Encapsulation.None (где не применяется стиль хоста) и Encapsulation.Emulated ( где применяется стиль хоста).

Оба имеют css:

:host {
  color:red;
}

Вывод:

Stackblitz: https://stackblitz.com/edit/angular-kvjma8?file=src%2Fapp%2Fapp.component.html

Answer 1

Селектор компонента можно использовать в качестве селектора CSS для стилизации элемента хоста, когда для инкапсуляции установлено значение ViewEncapsulation.None:

/* With ViewEncapsulation.Emulated, use :host selector */
:host {
  color: red;
}

/* With ViewEncapsulation.None, use component selector */
app-child-encapsulation-none {
  color: green;
}

См. этот стек * блик для демо.