21

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?

Nisarg Shah
  • 14,151
  • 6
  • 34
  • 55
Kevin
  • 979
  • 4
  • 10
  • 22

3 Answers3

18

  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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 3
    If we are not supposed to use the shadow-piercing descendant combinator, then how are we to write rules where we want to shadow-pierce? –  Aug 31 '17 at 12:17
  • 1
    Either don't encapsulate (encapsulation: ViewEncapsulation.None), or don't pierce :) – craigmichaelmartin Jan 04 '18 at 19:25
  • 1
    @craigmichaelmartin I think that **all or nothing approach** is bad when taking into account real world use cases, especially when using 3rd party components (although it seems that things are going this way, unfortunately). `ViewEncapsulation` is good to avoid piercing the DOM **by default**, but it should allow pierce it when needed (with an explicit syntax). – Lucas Basquerotto Feb 13 '19 at 12:12
  • On the Angular blog, there is also some news about that: https://blog.angular.io/the-state-of-css-in-angular-4a52d4bd2700 They describe two alternatives that can be used instead. (CSS variables and gloabal stylesheets) – rugk Sep 18 '19 at 10:59
6

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.

Community
  • 1
  • 1
Christian Matthew
  • 4,014
  • 4
  • 33
  • 43
  • 6
    I guess it says in the docs that `::ng-deep` is also going to be deprecated. To quote the text from your answer (emphasize mine): _"As such we plan to drop support in Angular (**for all 3** of /deep/, >>> and ::ng-deep)."_ Or am I missing something? – Lasse Christiansen Nov 10 '17 at 15:50
0

There is a solution to fix error, add :host before /deep/

:host /deep/ .mat-slide-toggle-bar{

    background-color: #299DFF;
    padding: botton 20px;
}​
R15
  • 13,982
  • 14
  • 97
  • 173