Using / deep / and >>> in Angular 2

Question

I read this selector and get conflicting answers.

Q: What does / deep / and :: shadow mean in the CSS selector?

We see:

As Joel H. notes in the comments, Chrome has since become obsolete / deep / combinator, and this gives a syntax error in IE.

In: https://github.com/Microsoft/vscode/issues/7002

We see:

/ deep / no longer exists, so I don’t think we should support it. →> there is a new version that should probably be supported

However, in Angular 2 docs: https://angular.io/docs/ts/latest/guide/component-styles.html

We see:

// deep / selector also has an alias →>. We can use either of the two interchangeably.

Obviously, it would be wise to trust Angular 2 docs, but I'm a bit indecisive due to all this conflicting information.

In fact, in the latest version of Microsoft Visual Studio code, BOTH /deep/ and >>> create errors, although both of them work despite the errors.

My question is twofold:

• Is there / deep / here to stay? Do we have any source, quote, or anything from any specification that says it will be accepted? Or if it is officially out of date?

• Can we fix this error in Visual Studio code without disabling syntax checking at the same time?

Answer 1

• Is / deep / here to stay? Do we have any source, quote, or anything from any specification that says it will be accepted? Or if it is officially out of date?

  The syntax /deep/ deprecated, was last seen in css-scoping in 2014 , and its replacement >>> was deprecated about half a year ago in Chrome 45.

  The whole concept of shadow piercing descendant combinator must be completely removed from the Shadow DOM . Implementations can either completely remove it or add it to regular descendant combinators (which, depending on how the Shadow DOM will be implemented in the future, may or may not make sense).

• Can we suppress this error in Visual Studio code without disabling syntax checking at the same time?

  Unfortunately not.

  Angular allows both in an emulated representation of encapsulation for compatibility purposes, but authors are strongly encouraged to use >>> in the future, since /deep/ technically invalid now and therefore is not supported in its own encapsulation.

Answer 2

According to Google documentation, all major browsers will discount the full functionality of this feature. Thus, shadow punch streaming combinator is outdated and support is removed from the main browsers and tools.

https://angular.io/guide/component-styles

What can I use, which is more official than decrecaed: host () and :: host-context

Furthermore, according to google :: ng-deep will not become obsolete and will remain a viable option. therefore, it is preferable to use :: ng-deep.

The / deep / combinator component also has aliases →> and :: ng-deep.

Use / deep /, →> and :: ng-deep only with emulated view encapsulation. Emulation is the standard and most commonly used encapsulation. For more information, see the Encapsulation Section of the Control View. The shadow-piercing child combinator is deprecated, and support is removed from major browsers and tools. Thus, we plan to abandon support in Angular (for all 3 of / deep /, →> and :: ng-deep). Until then, :: ng-deep should be preferred for wider tool compatibility.