feat(compiler): add support ::ng-deep - #17677

The angular.io preview for 3480fbbf69283a9977401f1c53ec68bce06b515b is available here.

can you please update the commit message + leave a comment in the source code to also mention that this feature is deprecated? otherwise this looks good to me. thanks!

The angular.io preview for 39bde971002dea16db35c097c15216704822cacb is available here.

Thanks @matanlurey for the fix !

The angular.io preview for d8d46ff is available here.

So is there any way to project styles downward once these are deprecated? I don't understand how ::ng-deep mitigates the issue if support for that will be dropped eventually as well. Is Angular going to provide a solution for this at the Angular level? I Imagine this is going to affect a lot of people.

Instead of supporting this already deprecated functionality, why do you not implement the non-deprecated, standards-compliant ::slotted() (or ::ng-slotted, or ::ng-content, if you wish)?

#11595

Also, it would make sense to rename (with a rather long deprecation period) the <ng-content> to <ng-slot>, as the <content> element that ng-content emulates has been renamed to <slot> long time ago.

@rvalimaki Probably because one is easy and the other is complicated and complicated things have the tendency to cause code size and performance issues.
When all browsers support shadow DOM properly ViewEncapslation.emulated can be dropped and this feature would become redundant.
Just my guess.

@zoechi It's not that this feature would become redundant, but that this feature simply will not be a part of future browsers. Shadow piercing / deep selector is considered harmful some way by Google and other browser makers, I guess because of performance issues. Therefore there is no browser support anymore for that feature.

What will persist, AFAIK, is the ::slotted() selector, as it's not deprecated and should not have those performance issues. The main difference between ::ng-deep and ::slotted() is that ::ng-deep is unlimited shadow piercing for elements, while ::slotted() goes only 1 level 'deep', and not indefinitely deep as ::ng-deep does. It might be harder to implement, but it may as well be easier to implement, as no kind of recursion is needed. Without looking into source code, I cannot really comment on this.

Adding such feature as ::ng-deep now doesn't really make sense (even if it's deprecated), since there will never be similar feature anymore in native web components (and therefore not in ViewEncapsulation.native, I guess). I suggest using ViewEncapsulation.none for those container type components, until a proper solution is available. Using ::ng-deep will teach you a technique that's completely a dead end in the future, and you'll have to possibly do heavy refactoring to overcome the situation (though switching to ViewEncapsulation.none might be relatively easy even then). Been there, done that.

I think you're misunderstanding something here. This doesn't depend on a browser feature available or not.
Adding the feature does make sense, because /deep/ is deprecated in SASS and this would not allow to style across component boundaries with SASS.
If you look close, you'll see that ::ng-deep is the same as /deep/, just the name was changed.
Such a small change to allow Angular users a feature they are used to since 2 years is worth it any time.

The performance issues I mentioned are not about using a browser feature, but about emulating it. If using ::slotted() is so important to use, just use ViewEncapsulation.Native.

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.}