Angular. Стилизация host элемента

Имеется HelloComponent компонент:

@Component({
  selector: 'hello',
  template: `<div class="wrap">Hello {{name}}!</div>`,
  styleUrls: ['hello.component.css'],
})
export class HelloComponent  {
  @Input() name: string = 'Angular';
}

При его размещении в приложении (<hello></hello>) разметка будет выглядеть следующим образом:

<hello>
    <div class="wrap">Hello Angular!</div>
</hello>

Чтобы стилизовать сам <hello> (хост), в котором размещается содержимое компонента, применяются специальные селекторы из мира shadow DOM.

:host

Cелектор псевдокласса :host стилизует хост компонент.

:host {
  display: block;
  background-color: lightcoral;
}

Селектор :host является единственным способом стилизовать хост т.к. он не является частью собственного шаблона компонента. Элемент host находится в шаблоне родительского компонента.

:host(selector)

Для установки стилей хост компоненту при наличии на нём определённого класса используется функциональная форма с круглыми скобками :host(selector).

Следующий стиль будет применён к хост компоненту, если на компонент повесить класс active например через @HostBinding т.е. <hello class="active"></hello>

:host(.active) {
  font-weight: bold;
  font-size: 24px;
}

:host-context(selector)

Для установки стилей зависящих от каскада родительских элементов применяется форма :host-context(selector)

Следующий стиль будет применён к хост компоненту, если он размещен внутри <aside> элемента (<aside><hello></hello></aside>).

:host-context(aside) {
  text-align: right;
  background-color: lightblue;
}

Пример использования