-
Notifications
You must be signed in to change notification settings - Fork 26.2k
feat(compiler): add support ::ng-deep
#17677
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
vicb
commented
Jun 21, 2017
•
edited
Loading
edited
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you please also update https://github.com/angular/angular/blob/master/aio/content/guide/component-styles.md#deep with this info.
Also, since this is just a temporary measure to help people get off of this feature, we should document it as such and clearly state that this feature regardless of the syntax is deprecated.
cc: @wardbell for docs review, @StephenFluin for deprecation.
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! |
- /deep/ is deprecated and being removed from Chrome - >>> is semantically invalid in a stylesheet - sass will no longer support either in any version of sass -> use ::ng-deep in emulated shadow DOM mode Because the deep combinator is deprecated in the CSS spec, `/deep/`, `>>>` and `::ng-deep` are also deprecated in emulated shadow DOM mode and will be removed in the future. see https://www.chromestatus.com/features/6750456638341120
Thanks @matanlurey for the fix ! |
<div class="alert is-important"> | ||
|
||
The shadow-piercing descendant combinator is deprecated and [support is being removed from major browsers](https://www.chromestatus.com/features/6750456638341120) and tools. | ||
As such we plan to drop support in Angular (for all 3 of `/deep/`, `>>>` and `::ng-deep`). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How will styles be projected downward when support for all of these are removed?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
And what version of node-sass (or the Angular-CLI I guess) supports ::ng-deep?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We use CSS Custom Properties (the previous name was CSS Variables) but I am still not sure that this is and will be the only way.
BTW: CSS Custom Properties are not supported by IE at all ... it is too old.
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)? Also, it would make sense to rename (with a rather long deprecation period) the |
@rvalimaki Probably because one is easy and the other is complicated and complicated things have the tendency to cause code size and performance issues. |
@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. The performance issues I mentioned are not about using a browser feature, but about emulating it. If using |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |