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

user_1188074 0
Viewed 2745

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:

enter image description here

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

angular css
1 Answers

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.

user_10099220
Related