Host Encapsulated Styling in Angular Components

Image by Marcello Rabozzi from Pixabay

Scenario

We want to style the h1 element in the Stackblitz Angular Baseline Demo using host encapsulated styling (Prefixing the style rule selector with the element name) like this:

  styles: [`my-app h1 { color: orange; } `],

Approach

This is fairly straight forward. If we try the above rule by simply adding it as declared above, it will work as long as we we turn of the components ViewEncapsulation like this it works.

 encapsulation: ViewEncapsulation.None,

Demo