FWIW在我的研究中，我还没有找到任何ng-deep的替代品或其他适用的替代品。这是因为，我相信，Angular团队正在遵从W3C关于阴影dom的规范，该规范最初有deep这样的选择器。然而，W3C后来删除了该建议，但没有用新的建议替代它。在此之前，我想Angular团队会保留::ng-deep和它的替代品，但由于W3C草案的待定状态，它处于弃用状态。我现在不能花时间找到支持这一点的文档，但我最近确实看到了它。
长话短说：继续使用::ng-deep和它的替代品，直到有替代品被创建--弃用只是一个早期通知，这样人们就不会在实际变化发生时措手不及。
--更新--
https://drafts.csswg.org/css-scoping-1/如果你感兴趣的话，这是一个草案，看起来他们正在为shadow dom树中的元素设计一组健壮的选择器;这个规范一旦被批准，我认为将通知角克隆，如果有的话（也就是说，一旦角克隆在浏览器中生效，角克隆可能不需要实现自己的选择器）。

一种简单易行的深层样式的替代方法是使用父组件的元素选择器的普通样式，因此，如果您在hero-details.component.css中有这样的样式：

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

它会变成这样的样式。css：

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

基本上，深度样式是一种未封装的样式，所以在概念上，它更像是一种通用样式，而不是组件样式。就我个人而言，我不会再使用深度样式了。在主要版本更新中，破坏性的更改是正常的，不推荐的功能删除是公平的游戏。

为了绕过过时的::ng-deep，我通常禁用ViewEncapsulation，虽然这不是最好的方法，但它对我很有帮助。
要禁用ViewEncapsulation，请在组件中执行以下操作：

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

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

export class HeaderComponent {

}

这将使该组件中的.scss样式成为整个应用程序的全局样式。为了不允许样式在链中向上传递到父组件和同级组件，请使用选择器将整个scss Package 起来，如下所示：

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

现在，这里指定的样式将向下到子组件，所以你必须特别指定你的css选择器，并在添加CSS时注意你的p和q（也许添加你的Angular应用程序中指定的子选择器，然后添加它的样式）。
我说这不是最好的方法，因为上面的段落，但这对我很有帮助。

正如前面有人所说，如果您使用的是第三方库，那么偶尔避开::ng-deep几乎是不可能的。
让我们看看有没有其他选择
1.使用视图封装。无

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

请注意，打破组件的封装将使样式全局可用。我可以考虑两种方法来避免冲突和CSS怪异：

• 用一个类 Package 你的组件模板，example.component.html应该是这样的：

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

现在，由于没有 * 封装 *，您可以通过针对第三方组件的类来修改它们。也就是说，example.component.scss应该如下所示：

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

• 或使用组件的标记名作为 Package 。例如：

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

1.使用全局样式
就像在angular.json配置文件的样式数组中添加一个新的CSS文件一样简单。要知道，这最终会变得越来越难维护。就我个人而言，我会避免使用这个选项，或者将其作为最后的手段：）
1.使用指令
我同意这有点痛苦，因为你不能包含Styles in a directive（就像你可以在组件中做一样），但是有时候它会很方便，你也可以使用一个组件来应用样式，就像AngularMaterial团队对buttons所做的那样
1.***：主机：：ng-deep***
您已经了解了这一点，只是想说明将其与主机选择器一起使用是Angular推荐的避免潜在样式冲突的方法。
对未来的自我注解：https://angular.io/guide/component-styles
这应该是寻找官方替代方案/可行方法的第一个地方
1.鼓励库作者使用CSS变量，你可以从父组件或阴影部分定制（如果可能的话）。Ionic团队在这方面做得很好。更详细的解释你可以查看here
编辑1.正如@beppe9000在评论中提到的，：：ng-deep是一个Angular的东西。即使Angular团队明天删除了这个功能，你已经部署的应用仍然可以继续工作。混淆是因为旧的/deep/修饰符。

这不是：：ng-deep的一般替代，而是问题作者描述的用例：
在特殊情况下，如果您希望对路由器插座插入的元素进行样式化，则有一个优雅的解决方案，即使用CSS中的相邻邻居选择器：

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

这将适用于路由器出口的所有直接相邻元素。
进一步阅读：
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
https://angular.io/guide/router#router-outlet

如果你想设计一些第三方组件的风格，这些组件在网站的多个地方使用，但是你需要特定的CSS外观在一个地方，而不影响访问本页面后的其他地方-你可以使用[ngStyle]。我知道这并不适合所有情况，但在我的情况下，这是一条路（我需要有ViewEncapsulation.None，所以我不能在单独的CSS文件中隔离样式）。

您可以使用“/deep/"。它是：：ng-deep替代选项。

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