::ng-deep alternatives

Explore alternate approaches to the deprecated::ng-deep Angular API to avoid legacy code and hard to debug side effects

Style encapsulation is one of many great Angular features. Style encapsulation ensures that component styles don’t leak out and affect the rest of the page.

Thx to style encapsulation; we can safely target a div without affecting other divs on the page.

Thx to encapsulation, only div elements inside our component get a blue background. All others on the page don’t.

So we agree, encapsulation is great! But, in some use cases encapsulation also introduces some challenges. Let’s take a look.

Let’s imagine we want to customize the div of the FooComponent above. Instead of displaying a blue background, we want to show a green background. So we would try to overwrite the foo components div with a green background.

Trying to overwrite the div inside foo component.

Because of encapsulation, this approach does not work. We can not use a straight-forwarded CSS selector to style encapsulated components from the outside. It makes…