::ng-deep leaks out of component

🐞 bug report

Affected Package

The issue is caused by package @angular/core

Is this a regression?

Not sure

Description

Using ::ng-deep` causes the styles to be applied to elements completely outside of the component’s template. According to the documentation it should only affect elements inside the child’s template and descendant component’s templates.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-oo7twb?file=src%2Fapp%2Fhello.component.ts

🔥 Exception or Error

Notice that all 3 <p> elements are styled with the ::after text. The first one should not get the style.

🌍 Your Environment

Angular 7.2.13

[awalton3]

This is still an issue. I’m expecting it to only affect children but it is affecting whole other sections. Why is this closed? And how is this expected behaviour?

What else could we do to get expected behaviour?

Use case: reusable customised table used all over the show. One specific place we use the table can have a smaller min-width because we only show ID and Name, not a bunch of other stuff that requires horizontal scrolling etc. so to set min-width on table, I need to set it on the specific component using the reusable customised table component, not on the table component itself so it doesn’t affect everywhere else.

Looks like you can use :host ::ng-deep instead of ::ng-deep and it works. I had the same problem and this method solved the problem.

[tieppt]

I’m expecting it to only affect children but it is affecting whole other sections.

@CAspeling you can using following solution

:host ::ng-deep p::after {
    content: ': affected by styles';
}

Output:

[_nghost-nhb-c1] p::after {
    content: ': affected by styles';
}