The use of /deep/ and >>> in Angular 2

问题:

I've been reading up on this selector, and getting conflicting answers.

In: What do /deep/ and ::shadow mean in a CSS selector?

We see:

As Joel H. points out in the comments, Chrome has since deprecated the /deep/ combinator, and it 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. >>> is the new version, which should probably be supported

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

We see:

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

Obviously it would be wise to trust the Angular 2 docs, but I'm a bit hesitant because of all this conflicting information.

In fact, in the latest version of Microsoft Visual Studio Code, BOTH /deep/ and >>> create errors, though they both do work despite the errors.

My question is twofold:

1. Is /deep/ here to stay? Do we have any source, a quote, or anything from any specification saying that it will be adopted? Or if it has officially been deprecated?

2. Can we suppress this error in Visual Studio Code without all-together disabling syntax checking?

回答1:

1. Is /deep/ here to stay? Do we have any source, a quote, or anything from any specification saying that it will be adopted? Or if it has officially been deprecated?

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

   The entire concept of the shadow-piercing descendant combinator is slated to be removed from the Shadow DOM entirely. Implementations may either remove it altogether or alias it to the regular descendant combinator (which depending on how the Shadow DOM is implemented in the future may or may not make sense).

2. Can we suppress this error in Visual Studio Code without all-together disabling syntax checking?

   Unfortunately not.

   Angular allows both in emulated view encapsulation for compatibility purposes, but authors are strongly encouraged to use >>> going forward, since /deep/ is technically invalid now, and therefore unsupported in native view encapsulation.

回答2:

According to the google documentation all major browsers are going to deprecate all functionality of said feature. Therefore, the shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools.

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

What can be used that is more offiical and not deprecaed is ::host() and ::host-context

Also, according to google ::ng-deep will not be deprecated and will continue to be a viable option. so using ::ng-deep will be preferred.

The /deep/ combinator also has the aliases >>>, and ::ng-deep.

Use /deep/, >>> and ::ng-deep only with emulated view encapsulation. Emulated is the default and most commonly used view encapsulation. For more information, see the Controlling view encapsulation section. The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

文章来源: The use of /deep/ and >>> in Angular 2