article This originally appeared on dormoshe.io The Shadow Piercing combinators ( , and ) are deprecated for a while by , common browsers, and tools. Sass and Chrome bring this resolution into the reality. /deep/ >>> ::shadow W3C Sass will no longer support /deep/ and >>> in any version of Sass; Chrome change the behavior of /deep/ since Chrome 60 The Angular’s team decided to add a new combinator for Angular that called . , that was released in the last week (July 14). ::ng-deep The new combinator is here with the new version of Angular 4.3.0 The Angular’s team recommendation is to stop using the old combinators and start using ::ng-deep In this short article, we will review the state of this drop and follow the recommendations of the Angular’s core team. A little background — Shadow Piercing combinators The original intent of was to provide a way to handle exceptional cases of when the scoping boundary is in the way of an occasional practical need to or globally. /deep/ tweak styling from outside of the scope The completely ignores all shadow boundaries and crosses into any number of shadow trees. Put simply, allows you to drill into an element's guts and target any node. /deep/ /deep/ The combinator is particularly useful in the world of Custom Elements. For example, when a leaf is a descendant of a garden (at any level), we can change the styling like this: /deep/ garden /deep/ leaf {  border: 3px solid dark-green;} The combinator also has the aliases , so this example can be written in Angular like that: /deep/ >>> garden >>> leaf {  border: 3px solid dark-green;} The status of the drop The decision to remove those combinators was accepted in the Web Applications WG (WebApps) Web Components . meeting at 2015 The meeting discussion and resolution According to this meeting, signed the combinators as deprecated. In the next stable version of Chrome, version 60, . The combinator will behave like the , i.e. space, effectively no-op. Chrome v45 the behavior of the combinator will be changed /deep/ descendant combinator, ` ` The new ::ng-deep combinator combinator is a new combinator of Angular that landed with the last minor release — 4.3.0. is an alias of /deep/ and >>>, but because these combinators drop these days by tools and browsers, Angular added this new combinator. ::ng-deep ::ng-deep The . According to the Angular’s core team recommendation, until the drop of the combinators by Angular - ::ng-deep is not a long term solution to the issue, and it is also deprecated The `::ng-deep` should be preferred for a broader compatibility with the tools There is no any clarification about when the new combinator will be dropped, but we know, that any use of the shadow piercing combinator will only be removed from Angular when there is a clear migration path. Conclusion The drop of the combinators from tools and browsers was only a matter of time. Now, when Chrome and Sass are working on this drop, there is no choice to handle this resolution. A new substitution supplied by the Angular team and we should use it. It’s obvious that we will hear about this topic in the near future. Until then, just use the for a broader compatibility. ::ng-deep You can follow me on dormoshe.io or Twitter to read more about Angular, JavaScript and web development.

Target

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

The New Angular ::ng-deep and the Shadow-Piercing Combinators Drop

Too Long; Didn't Read

Companies Mentioned

Dor Moshe

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

The New Angular ::ng-deep and the Shadow-Piercing Combinators Drop

Too Long; Didn't Read

Companies Mentioned

Dor Moshe

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES