ng-deep

[heady tusk]

how can i override css for a third party library without using ng-deep? is that possible

[gleaming sigil]

It depends on the library, so check their documentation. Some will expose CSS variables or inputs that you can set, but others expect you to use their components as-is.

Using ng-deep should be a last resort, as you have no guarantee that the DOM of the third-party components will remain as expected. The recent overhaul of Angular Material is a prime example of this.

[heady tusk]

thanks

[heady tusk]

will angular provide another shadow-piercing descendant combinator in the future? how will be able to create such css masterpieces without ng-deep

[upper trout]

No one knows, for customization you have few alternatives, you can take a look at this https://discord.com/channels/748677963142135818/1179888897359093837 it's about MD but solutions provided can be applied to any other packages, hopefully it helps

[grizzled berry]

Don't suggest to use !important in global *css

[craggy granite]

To my understanding, the concept of shadow piercing itself is deprecated ( e.g. deemed to be a bad idea), so i wouldn't imagine they would introduce a new way of doing it.

The reason it is a bad idea is because you are saying "This component is entirely encapsulated.... except for this bit" Which means it isn't encapsulated at all.

When I need to style a third party component, i would ordinarily wrap it in my own component ( so if i decide to swap the third party lib, it i only have to have to update it in one place) and i turn view encapsulation off for that component, and then make sure that all of the styles are nested underneath the component's selector:

my-wrapped-component{
 .third-party-class{
    border: red;
   }
}

[grizzled berry]

That would not help if the third party lib ships components with encapsulated styles.

[craggy granite]

Are you talking about shadow dom or emulated?

Because you are right for shadow dom, but i haven't come across a library that uses shadow dom( I am not saying none do, i am just saying that this isn't a problem I have encountered ), however it works fine for components with emulated encapsulation.

[grizzled berry]

I'm not sure that will be always valid.
Your system should just add weight 1 to specificity, but that should still be balanced by the attribute added by emulated encapsulation.
I'd like to see a SB with the situation to make some tests, if you got one at hand.

[upper trout]

So in fact - it wasn't a suggestion, it was more than likely an idea how to do such a thing that author asked for, it's well known as bad practice since it overrides all the styles for specific class etc. If you use it correctly then I don't see any cons