Repository navigation
Clarify information about deprecation of :ng-deep and recommend replacement #25160
Description
The documentation at https://angular.io/guide/component-styles states this about :ng-deep:
The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep).
As I understand, Angular was using the browser support for the piercing selectors /deep/ and >>>.
But :ng-deep is surely not supported by any browser.
And this is what I find confusing in the documentation. I don't understand what browser support has anything to do with :ng-deep.
The way I understand it, :ng-deep prevents Angular from appending the attribute selectors to all selector following it.
So, this CSS in a component:
:host ::ng-deep .my-button .ui-button-text {
font-weight: bold;
}
will be transformed to:
[_nghost-c12] .my-button .ui-button-text {
font-weight: bold;
}
Without :ng-deep, this will be produced instead:
[_nghost-c12] .my-button[_nghost-c12] .ui-button-text[_nghost-c12] {
font-weight: bold;
}
(obviously breaking my intention).
I find 2 problems with the documentation, as it stands now:
- I don't see any relationship between lack of browser support for piercing selectors and deprecating
:ng-deep - I don't see any reason to deprecate
:ng-deep(since it just tells Angular: "keep your attribute selectors away from my styles")
I propose the following:
- if I missed anything, and there is a valid reason why
:ng-deepshould be deprecated, the documentation should be changed to explain why - if my reasoning above is correct, remove the section about deprecating
:ng-deep, keeping the deprecation notice only for the piercing selectors/deep/and>>>.
Activity
[-]fix confusing documentation about ::ng-deep[/-][+]fix confusing documentation about :ng-deep[/+]trotyl commentedon Jul 27, 2018
Duplicate of #17867.
:ng-deepis only used to provide deprecating stage, allowing user to drop this usage with a forgiving time period. It's never a designed new feature of Angular.:ng-deepis indeed not supported by browser, that's why it shouldn't be supported by Angular in the first place.cvmocanu commentedon Jul 27, 2018
I fail to see the logic in this.
:ng-deepdoesn't need browser support. It only needs Angular pre-processing support, and we already have this.trotyl commentedon Jul 27, 2018
@cvmocanu The
ViewEncapsulation.Emulatedis an exact shim of Shadow DOM behavior, there won't be any so-called Angular rule for that.cvmocanu commentedon Jul 27, 2018
I guess I need to do some reading on the Shadow DOM.
It looks to me that the people on the Shadow DOM standards commission just deprecated a useful feature, without providing an alternative :(
pauldraper commentedon Jul 27, 2018
@trotyl #17867 had no resolution.
Angular seems confused by whether it wants to offer Angular features or be a compatibility layer for W3C
specsdrafts (which are a constantly moving target, making Angular an unstable platform).jenniferfell commentedon Aug 9, 2018
Looks like the resolution for #17867 (thanks for the link, @trotyl ) is to watch #23636. This seems to be an open question of what the Angular platform supports, and that issue contains the discussion.
I believe the documentation is, for now, correct and complete:
"The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools."
When we have more information about the replacement options, we will publish them.
jenniferfell commentedon Aug 9, 2018
@IgorMinar When you get a chance, is my assessment above correct? Is there anything we can or should add now to the documentation here: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
Thank you.
102 remaining items
alxhub commentedon Mar 22, 2024
As (sort of) announced at ng-conf,
ng-deepis no longer labeled as deprecated in the angular.dev docs. We will not be removing the feature (not that we had planned to anyway). However, we still discourage its use, as we viewng-deepas a CSS anti-pattern in many cases, similar to e.g.!important.Jordan-Hall commentedon Mar 22, 2024
That's a really bad decision. Even if you don't remove it :( people will just use and abuse it. So many clients abused the feature as it is
diegovilar commentedon Mar 22, 2024
I think that keeping it is the right call. Removing it would be like removing !important from CSS. It's a last resource, but sometimes it is the ONLY way we can customize something we did not author ourselves and the ppl who did did not include extension points
dalenguyen commentedon Mar 23, 2024
Agree, especially for something like Material Overlay CDK. Without ng-deep, the custom styling would end up in global styles.
pauldraper commentedon Mar 23, 2024
Somehow, for some reason, Yyars of conversation assumed otherwise ^
Communication is key.
angular-automatic-lock-bot commentedon Apr 23, 2024
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.