Utilizing /deep/ and the triple greater than symbol (>>>) within Angular 2

Question

Utilizing /deep/ and the triple greater than symbol (>>>) within Angular 2

After researching the /deep/ and ::shadow selectors, I've come across conflicting information.

In a discussion on Stack Overflow: What do /deep/ and ::shadow mean in a CSS selector?

It was noted that Chrome has deprecated the /deep/ combinator and it throws a syntax error in IE.

In another thread on GitHub: https://github.com/Microsoft/vscode/issues/7002

A comment mentioned that /deep/ no longer exists and suggested that we should start using the >>> notation instead.

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

It states that the /deep/ selector is still relevant and can be used interchangeably with >>>.

Considering these conflicting opinions, I'm inclined to trust Angular 2's perspective. However, there are reports of errors being generated in the latest version of Microsoft Visual Studio Code when using both /deep/ and >>>.

So, my questions are:

Is /deep/ going to remain a valid selector? Is there any official confirmation or deprecation notice regarding its adoption?
Can we prevent these errors in Visual Studio Code without completely disabling syntax checking?

css angular css-selectors

Answer 1

Answer №1

Is the use of /deep/ a permanent feature? Is there any official confirmation or statement from a specification indicating its adoption, deprecation, or removal?

The syntax /deep/ is considered obsolete, with its last appearance in css-scoping back in 2014. Its replacement >>> was deprecated approximately six months ago in Chrome 45.

The concept of the shadow-piercing descendant combinator is on track to be completely removed from the Shadow DOM framework as stated here. Implementations may choose to eliminate it entirely or alias it with the regular descendant combinator, depending on future changes to the Shadow DOM specifications.
Is there a way to disable this error specifically in Visual Studio Code without turning off all syntax checking functionality?

Unfortunately, there is no direct solution for this issue.

While Angular supports both approaches in emulated view encapsulation for compatibility reasons, developers are advised to transition towards using >>> moving forward. The usage of /deep/ is now technically invalid and not supported in native view encapsulation environments.

Answer 2

Is the use of /deep/ a permanent feature? Is there any official confirmation or statement from a specification indicating its adoption, deprecation, or removal?

The syntax /deep/ is considered obsolete, with its last appearance in css-scoping back in 2014. Its replacement >>> was deprecated approximately six months ago in Chrome 45.

The concept of the shadow-piercing descendant combinator is on track to be completely removed from the Shadow DOM framework as stated here. Implementations may choose to eliminate it entirely or alias it with the regular descendant combinator, depending on future changes to the Shadow DOM specifications.
Is there a way to disable this error specifically in Visual Studio Code without turning off all syntax checking functionality?

Unfortunately, there is no direct solution for this issue.

While Angular supports both approaches in emulated view encapsulation for compatibility reasons, developers are advised to transition towards using >>> moving forward. The usage of /deep/ is now technically invalid and not supported in native view encapsulation environments.

Answer 3

Answer №2

As per the latest updates from Google, all major web browsers are phasing out the functionality of a particular feature. Consequently, the shadow-piercing descendant combinator is now considered deprecated and will no longer be supported by popular browsers and development tools.

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

To adhere to official guidelines and avoid deprecated options, developers are encouraged to use ::host() and ::host-context instead.

In addition, it has been clarified by Google that ::ng-deep will not face deprecation and can still be utilized effectively. Therefore, opting for ::ng-deep remains the recommended approach.

The /deep/ combinator is also known as >>> and ::ng-deep.

It is advised to use /deep/, >>>, and ::ng-deep exclusively with emulated view encapsulation. Emulated view encapsulation is the default and widely used method. For more details, refer to the Controlling view encapsulation section. The shadow-piercing descendant combinator's support is being phased out in major browsers and tools. Consequently, Angular intends to discontinue support for all three (/deep/, >>>, and ::ng-deep). Until then, prioritizing the usage of ::ng-deep ensures broader compatibility with various tools.

Answer 4

As per the latest updates from Google, all major web browsers are phasing out the functionality of a particular feature. Consequently, the shadow-piercing descendant combinator is now considered deprecated and will no longer be supported by popular browsers and development tools.

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

To adhere to official guidelines and avoid deprecated options, developers are encouraged to use ::host() and ::host-context instead.

In addition, it has been clarified by Google that ::ng-deep will not face deprecation and can still be utilized effectively. Therefore, opting for ::ng-deep remains the recommended approach.

The /deep/ combinator is also known as >>> and ::ng-deep.

It is advised to use /deep/, >>>, and ::ng-deep exclusively with emulated view encapsulation. Emulated view encapsulation is the default and widely used method. For more details, refer to the Controlling view encapsulation section. The shadow-piercing descendant combinator's support is being phased out in major browsers and tools. Consequently, Angular intends to discontinue support for all three (/deep/, >>>, and ::ng-deep). Until then, prioritizing the usage of ::ng-deep ensures broader compatibility with various tools.

Answer 5

Answer №3

If you're encountering an error, one way to resolve it is by including :host before /deep/

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

    background-color: #299DFF;
    padding: botton 20px;
}

Answer 6

If you're encountering an error, one way to resolve it is by including :host before /deep/

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

    background-color: #299DFF;
    padding: botton 20px;
}

Utilizing /deep/ and the triple greater than symbol (>>>) within Angular 2

Answer №1

Answer №2

Answer №3

Similar questions

The slicing of jQuery parent elements

Select the top row of a table when the checkbox is ticked to emphasize it

What could be the reason for Internet Explorer pulling styles from the media=print CSS?

Resolve cyclic dependency caused by utilizing the useFactory parameter

parsing objects within an HTML component in Angular

Tips for incorporating a mail button to share html content within an Angular framework

How can we effectively utilize LESS variables in styles.less when working with LESS files within components in Angular versions 6 or 7?

Is there a way to remove the initial number entered on a calculator's display in order to prevent the second number from being added onto the first one?

What are the best practices for maximizing the efficiency of bootstrap-sass?

What is the process for downloading a .docx file encoded in Base64?

Angular authentication guard does not redirect properly after returning a Promise<UrlTree>

Unusual phenomenon of overflow and floating point behavior

Error: Angular encountered an undefined variable when attempting to import 'node_modules/bootstrap/scss/grid'

Displaying a banner at the bottom of a React page

Switching back and forth between JQuery and CSS display changes

Displaying an image within a textarea using JS and CSS

Alignment of text in a stationary element's location

What is the best way to create a seamless transition for background-image animations

Is it possible for the ionic ionViewDidEnter to differentiate between pop and setRoot operations?

Troublesome Suckerfish CSS Navigation Menus failing to function properly on IE7