Repository navigation
Support /deep/ and >>> selectors in ViewEncapsulation.Emulated #7562
Description
Right now, selectors after :host are not properly shimed (see #5390). Users already use this feature for theming purposes.
If we supported the /deep/ and >>> selectors, users could just replace :host ... with :host >>> ....
Semantics:
a >>> b
Will be converted into
a[ngcontent_xzy] b
I.e. the selector after >>> and /deep/ will not be shimmed.
Activity
todoubaba commentedon Mar 11, 2016
Has already been implemented?
https://github.com/angular/angular/blob/master/modules/angular2/src/compiler/shadow_css.ts#L437
https://github.com/angular/angular/blob/master/modules/angular2/test/compiler/shadow_css_spec.ts#L145
ericmartinezr commentedon Mar 11, 2016
What about this comment #6511 (comment) ?
tbosch commentedon Mar 11, 2016
Thanks @ericmartinezr!
tbosch commentedon Mar 11, 2016
@todoubaba Not implemented yet. If you check the specs, they show that the selectors after
/deep/are still shimmed.ericmartinezr commentedon Mar 11, 2016
@tbosch sorry, but my comment was more like why support something that is/has being deprecated? See https://bugs.chromium.org/p/chromium/issues/detail?id=489954 or will angular2 have its own implementation of these selectors?
feat(shadow_css): support `/deep/` and `>>>`
tbosch commentedon Mar 11, 2016
@ericmartinezr Supporting
/deep/is the most logical solution for now. Once we have more resources to implements css variables and also have a good way that is fast enough, we might revisit this.zoechi commentedon Mar 12, 2016
What's the purpose of adding
/deep/and>>>. In shadow DOM that later was supposed to replace the former but they fulfill the same purpose. If you really want to add this feature, it should IMHO be>>>and::shadowor/deep/and::shadow(I think/deep/was more in use than'>>>because these combinators were deprecated shortly after it was announced that>>>replaces/deep/AFAIR.samvloeberghs commentedon Feb 2, 2017
Is
>>>still the way to go? From what I can read from the web fundamentals, using web components, the best way to do this is using css custom properties / variables:https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom
I'm sensing great browser compatibility issues here, thank God I'm targetting Chromium on Electron!
DzmitryShylovich commentedon Feb 2, 2017
angular has its own css parser.
samvloeberghs commentedon Feb 2, 2017
thanks for being so clear @DzmitryShylovich.. So what's the recommendation?
What if I use
ViewEncapsulation.Native?samvloeberghs commentedon Feb 2, 2017
I managed to read that part already.. But you're totally avoiding my question and suggestion..
Will/should the css custom properties / variables work with emulated? I'm writing a test case asap.
zoechi commentedon Feb 2, 2017
@samvloeberghs AFAIK you can use it if the browser supports it. Angular doesn't have any special support for them (like for example Polymer does)
janwo commentedon Feb 27, 2017
What is the status now? Shall I use /deep/ in the emulated mode?
zoechi commentedon Feb 27, 2017
@janwo
/deep/ and>>>work the same, just SASS doesn't like>>>, but works fine with/deep/janwo commentedon Feb 27, 2017
@zoechi But are there any plans against using /deep/ in angular?
zoechi commentedon Feb 27, 2017
I guess so, probably depending on where shadow DOM is heading.
Angular emulates
/deep/, therefore it's not relevant it's deprecated in Chrome. Chrome never has to deal with/deep/.aperl commentedon May 9, 2017
Is there a clear decision if this will be supported long term? If not then it probably ought to be removed form the documentation. https://angular.io/docs/ts/latest/guide/component-styles.html#!#special-selectors. I would rather it stuck around.
zoechi commentedon May 9, 2017
@aperl I'm pretty sure there are no plans to remove it as long as there is not good replacement, and AFAIK there currently isn't, therefore there is no reason to remove it from the docs.
kuncevic commentedon Jul 16, 2017
b754e60 how would you workaround that after it is depreciated?
ericmartinezr commentedon Jul 16, 2017
@kuncevic #17867 (comment) plus #7845 (comment)
kuncevic commentedon Jul 17, 2017
@ericcarraway
didn't realize that ;) tnahks
daddyschmack commentedon Jul 25, 2017
@kuncevic, that's not what this article is saying:
https://angular.io/guide/component-styles#!%23special-selectors
angular-automatic-lock-bot commentedon Sep 12, 2019
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.