Thanks to visit codestin.com
Credit goes to github.com

Skip to content

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

Merged
merged 1 commit into from
Jun 23, 2017
Merged

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

merged 1 commit into from
Jun 23, 2017

Conversation

vicb
Copy link
Contributor

@vicb vicb commented Jun 21, 2017

- /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

@vicb vicb added area: core Issues related to the framework runtime action: review The PR is still awaiting reviews from at least one requested reviewer labels Jun 21, 2017
Copy link
Contributor

@IgorMinar IgorMinar left a 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.

@mary-poppins
Copy link

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

@IgorMinar IgorMinar added action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Jun 22, 2017
@IgorMinar
Copy link
Contributor

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!

@mary-poppins
Copy link

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

- /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
@vicb
Copy link
Contributor Author

vicb commented Jun 22, 2017

Thanks @matanlurey for the fix !

@vicb vicb added action: merge The PR is ready for merge by the caretaker and removed action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews labels Jun 22, 2017
@mary-poppins
Copy link

The angular.io preview for d8d46ff is available here.

@matsko matsko merged commit b754e60 into angular:master Jun 23, 2017
<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`).
Copy link

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?

Copy link

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?

Copy link
Contributor

@mlc-mlapis mlc-mlapis Jun 26, 2017

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.

@Matmo10
Copy link

Matmo10 commented Jun 27, 2017

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.

@rvalimaki
Copy link

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.

@zoechi
Copy link
Contributor

zoechi commented Jul 21, 2017

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

@rvalimaki
Copy link

rvalimaki commented Jul 21, 2017

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

@zoechi
Copy link
Contributor

zoechi commented Jul 21, 2017

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.

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 12, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker area: core Issues related to the framework runtime cla: yes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

10 participants