Is it possible to style using :host with Encapsulation.None in Angular?

Question

I am trying to use :host with Encapsulation.None but the styles are not applying.

Should this work and if so how?

Example below, there are 2 child components that are identical except for Encapsulation.None (where the host styling is not applied) and Encapsulation.Emulated (where the host styling is applied).

Both have css:

:host {
  color:red;
}

Output is:

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

Answer 1

The component selector can be used as the CSS selector to style the host element when the encapsulation is set to ViewEncapsulation.None:

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

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

See this stackblitz for a demo.