An alternative to a deep style is using the element selector of the parent component, which offers a simple and easy way to achieve a similar effect. For example, if you originally had this in hero-details.component.css:

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

You can achieve the same result by adding this to your root styles.css:

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

In my opinion, deep styles feel more like common styles rather than specific to a component, as they are not encapsulated within a single component. Personally, I prefer not to use deep styles anymore. It's normal for breaking changes to occur during major updates, and removing deprecated features is to be expected.

When I need to work around the deprecation of ::ng-deep, my go-to solution is to disable ViewEncapsulation. While I acknowledge that this may not be the most optimal approach, it has consistently delivered results for me.

To implement the disabling of ViewEncapsulation in your component, follow these steps:

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

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

export class HeaderComponent {

}

By doing this, the .scss styles within this component will be applied globally throughout the entire application. If you wish to restrict the styles from cascading to parent and sibling components, enclose the scss with the appropriate selector like so:

app-header {
  // Include your styles here and any child component styles can also be placed here
}

Keep in mind that the styles defined in this manner will trickle down to child components, necessitating careful consideration of css selectors and attention to detail when adding CSS (perhaps including the specific child selector dictated in your Angular app along with its corresponding styles).

While I do recognize the limitations outlined above, this methodology has proven effective for me thus far.

In the latest update of 2024: ::ng-deep remains a relevant topic, as it is not going away. However, the Angular team still suggests using it as a last resort.

It has been mentioned that when utilizing third-party libraries, occasionally using ::ng-deep is almost unavoidable.

Lets explore some alternatives:

1. Utilize ViewEncapsulation.None

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

Note that breaking the component's encapsulation will result in the styles being globally accessible. To prevent conflicts and CSS issues, two approaches come to mind:

• Wrap your component's template with a class. For instance, example.component.html could look like this:

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

With no Encapsulation, you can modify the third-party component by targeting their classes. Thus, example.component.scss would be:

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

• Alternatively, use the component's tag name as a wrapper. For example:

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

2. Employ Global styles

Add a new CSS file to your styles array in the angular.json configuration file. However, note that maintaining global styles may become increasingly difficult over time. Personally, I recommend avoiding this option unless necessary :)

3. Implement a directive

Although slightly cumbersome due to limited styling capabilities compared to components, directives can prove helpful at times. Alternatively, mimic how the Angular Material team applied styles with the buttons

4. :host ::ng-deep

You are probably familiar with this method, but combining it with the host selector is advised by Angular for minimizing potential style clashes.

A reminder for future reference: https://angular.io/guide/component-styles
Official suggestions and alternatives can be found there

5. Urge library developers to utilize CSS variables that can be customized from the parent component or through shadow parts (when feasible). The Ionic Team exemplifies this well. For further details, refer to here

Edit 1. As @beppe9000 pointed out in a comment, ::ng-deep is exclusive to Angular. Even if the feature is removed by the Angular team in the future, existing applications will continue to function. Previous confusion stemmed from the old /deep/ modifier.

Implement the :host-context selector within the child component's encapsulated styles for a modern alternative:

:host-context(.another-class) .specific-element {
  /* define styles that will be applied when a parent element contains the 'another-class' class */
}

Read more about :host-context here

This is not a one-size-fits-all alternative to ::ng-deep, but rather a tailored solution to the specific scenario outlined by the original poster:

When faced with the unique challenge of styling the content inserted through a router-outlet, you can achieve a sleek solution by utilizing the adjacent sibling selector in CSS:

router-outlet+* {
  /* your styles go here... */
}

These styles will only affect elements that immediately follow a router-outlet in the DOM structure.

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

When it comes to customizing a third-party component that is being used in various areas of your site, but you only want the specific CSS changes to apply on one particular page without affecting other instances elsewhere - utilizing [ngStyle] may be the solution. I recognize that this approach may not be ideal for every scenario, however, it has proven to be effective in my situations (especially when needing to use ViewEncapsulation.None and unable to separate styles into individual CSS files).

Consider switching out ::ng-deep for >>>