What to use in place of ::ng-deep

Question

I'm trying to style an element placed by the router outlet in angular and want to make sure that the element generated gets a width of 100%

From most of the replies, I'm seeing that I should use the ::ng-deep selector, but from Angular's docs it is being deprecated. Is there an alternative to ::ng-deep?

Answer 1

FWIW In my research I have not found any replacement for ng-deep or the other applicable alternatives. This is because, I believe, the Angular team is deferring to the W3C spec on the shadow dom, which initially had selectors such as deep. However, the W3c has since removed the recommendation, but not replaced it with a new one. Until that happens, I imagine that the Angular team will keep ::ng-deep and it's alternatives available, but in deprecated state due to the pending state of W3C's drafts. I am not able to take the time to find the documentation to back this up right now but I did see it recently.

Long story short: Keep using ::ng-deep and its alternatives until a replacement is created - the deprecation is just an early notice so that people aren't blindsided whenever the actual change materializes.

-- UPDATE --

https://drafts.csswg.org/css-scoping-1/ Here is the draft proposal if you're interested. It appears that they are working on a robust set of selectors for elements within a shadow dom tree; it is this spec, once approved, that I think will inform the angular clone, if there even is one (i.e. angular may not need to implement their own selectors once this goes live in browsers).

Answer 2

The simple and easy alternative to a deep style is a common style using the element selector of the parent component. So if you had this in hero-details.component.css:

:host ::ng-deep h3 {
  font-style: italic;
}

It would become this in styles.css:

app-hero-details h3 {
  font-style: italic;
}

Basically a deep style is an un-encapsulated style so it conceptually seems more like a common style to me than a component style. Personally I would not use deep styles anymore. Breaking changes are normal in major version updates and deprecated feature removal is fair game.

Answer 3

To bypass the deprecated ::ng-deep, I usually disable ViewEncapsulation. Although this is not the best approach, it has served me well.

To disable ViewEncapsulation, do the following in your component:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class HeaderComponent {

}

This will make the .scss styles in this component global to the whole application. To not allow the styles to go up the chain to parent and sibling components, wrap the whole scss with the selector like so:

app-header {
  // your styles here and any child component styles can go here
}

Now, the styles specified here will go down to children components so you have to be extra specific with your css selectors and mind your p's and q's when adding CSS (maybe add the child selector specified in your Angular app and then its styles).

I say it is not the best approach because of the paragraph above, but this has served me well.

Answer 4

As someone stated before, if you're using a third party library it's virtually impossible to avoid having to use ::ng-deep once in a while. But what are you going to do about your previous projects when the ::ng-deep became no longer supported by browsers?

To be ready for that moment I will suggest the following:

1. Use ViewEncapsulation.None wisely. Which translates to only for those components that needs to access deeper components.

@Component({
      selector: 'app-example',
      templateUrl: './example.component.html',
      styleUrls: ['./example.component.scss'],
      encapsulation: ViewEncapsulation.None
    })

2. Now, to avoid collisions and CSS weirdness you should (as a rule) always wrap your component's template with a class. So, example.component.html should be like:

<section class="app-example-container">
<!-- a third party component -->
<mat-tab-group>
<mat-tab label="First"></mat-tab>
<mat-tab label="Second"></mat-tab>
</mat-tab-group>
</section>

3. Again, by rule, the first line of every single SCSS file will target the component container. Since there's no Encapsulation you can modify the third party component by targeting their classes. That said, example.component.scss should be like:

.app-example-container {
/* All the CSS code goes here */
.mat-tab-group .mat-tab-label {color: red;}
}

A self note to the future: https://angular.io/guide/component-styles
That should be the first place to look at for official alternatives/ways-to-go

Answer 5

This is not a general replacement for ::ng-deep, but for the use case described by the question author:

In the special case where you want to style the element inserted by a router-outlet, there is an elegant solution using the adjacent neighbor selector in CSS:

router-outlet+* {
  /* styling here... */
}

This will apply to all elements which are direct neighbors of a router-outlet.

Further reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
https://angular.io/guide/router#router-outlet

Answer 6

You can use "/deep/". It's ::ng-deep alternative.

:host /deep/ h3 {
  font-style: italic;
}