Disabling View Encapsulation on PrimeNG

[kyjus25]

A common problem that we get questions on is the need to use :host ::ng-deep in order to style the components. This is because, unlike Angular Material, the PrimeNG components keep their View Encapsulation strategy set to the default value of Shadow DOM. Using the ::ng-deep override is often seen by folks as a hack, or dirty, and are confused why it isn't necessary in Angular Material but is for PrimeNG.

Angular Material opts to disable View Encapsulation, and I wanted to open up a discussion on whether PrimeNG should follow suit to avoid confusion and it "just works", and we assume that Angular Material is a representation of the "best practice" way to handle UI libraries.

The addition of pass-through props may be a great time to introduce a change like this, though I believe turning off encapsulation should not be a breaking change, it's going the other direction that would cause breakages.

Curious your thoughts!

[kyjus25]

@SoyDiego

[cagataycivici]

I'm a bit confused because default value is encapsulation: ViewEncapsulation.None, for example.

https://github.com/primefaces/primeng/blob/master/src/app/components/checkbox/checkbox.ts

we assume that Angular Material is a representation of the "best practice" way to handle UI libraries.

I'm not sure, it is strictly based on Material Design and I heard customization is not easy, I remember seeing !important in their CSS as well, things may have improved lately as I believe they changed their implementation.

PassThrough is definitely coming to PrimeNG which will remove the necessity to use ng:deep but can you give me a concrete example so we can go over it? When did you need :host ::ng-deep. Styling enhancements like CSS variables migration from scss, moving primeng-sass-theme to core, unstyled mode, passthrough props will start in early october so let's make sure we don't miss anything important.

[kyjus25]

Oh interesting, you're correct, they are set to disable View Encapsulation just like Angular Material is. I've definitely seen ::ng-deep necessary, so I guess the issue here is something else.

[davidhmays]

I can't seem to get any of the PrimeNG structural classes to apply any changes when applied at the component level unless using ::ng-deep. I can get style changes to work when targeting structural classes without ::ng-deep only if applying them in the in the top level styles.css. I'd thought also that this must be due to Prime components' encapsulation mode.

Is there a way to manually change the encapsulation mode of PrimeNG components?