Component styles not applying in emulated view encapsulation (Angular 5)

I'm using PrimeNG library (https://www.primefaces.org/primeng) in an Angular 5 app and I've realized that, if I use some of its controls inside an Angular component with ViewEncapsulation.Emulated I can't apply to them any custom style to them.

For example, I'm using the p-checkbox control inside a component, and I have the following (horrible) CSS rules in its style file:

th {
background-color: olive !important;
}

.ui-chkbox {
background-color: aqua !important;
height: 2.5rem !important;
}


NOTE: ui-chkbox is the DIV containing the checkbox.

Here's how it looks if I set encapsulation: ViewEncapsulation.None:



If I change to encapsulation: ViewEncapsulation.Emulated, it looks like:



As you can see, the component th tag is still being styled but the checkbox component is not. I thought that the emulated view encapsulation was intended to "isolate" the component styles so they don't collide with others defined outside, but it seems that it also affects to inner components.

Could somebody explain this behaviour? I've read a couple of encapsulation tutorials but I couldn't find the reason.

Thanks!

Continue reading...