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

This article originally appeared on dormoshe.io

The Shadow Piercing combinators (/deep/, >>> and ::shadow) are deprecated for a while by W3C, common browsers, and tools. Sass and Chrome bring this resolution into the reality.

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 ::ng-deep. The new combinator is here with the new version of Angular 4.3.0, that was released in the last week (July 14).

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 /deep/ was to provide a way to handle exceptional cases of when the scoping boundary is in the way of an occasional practical need to tweak styling from outside of the scope or globally.

The /deep/ completely ignores all shadow boundaries and crosses into any number of shadow trees. Put simply, /deep/ allows you to drill into an element's guts and target any node.

The /deep/ 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:

garden /deep/ leaf {  border: 3px solid dark-green;}

The /deep/ combinator also has the aliases >>>, so this example can be written in Angular like that:

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, Chrome v45 signed the combinators as deprecated. In the next stable version of Chrome, version 60, the behavior of the combinator will be changed. The /deep/ combinator will behave like the descendant combinator, ` `, i.e. space, effectively no-op.

The new ::ng-deep combinator

::ng-deep combinator is a new combinator of Angular that landed with the last minor release — 4.3.0. ::ng-deep is an alias of /deep/ and >>>, but because these combinators drop these days by tools and browsers, Angular added this new combinator.

The ::ng-deep is not a long term solution to the issue, and it is also deprecated. According to the Angular’s core team recommendation, until the drop of the combinators by Angular -

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 ::ng-deep for a broader compatibility.

You can follow me on dormoshe.io or Twitter to read more about Angular, JavaScript and web development.