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

Answer 1

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:

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;}
}