dud*_*wad 63
FWIW在我的研究中,我没有找到任何替代ng-deep或其他适用的替代品.这是因为,我相信,Angular团队正在推迟关于影子dom的W3C规范,影子dom最初有选择器如deep.但是,W3c已删除了该建议,但未将其替换为新建议.在此之前,我想象Angular团队会保留::ng-deep并且它的替代品可用,但由于W3C草案的待决状态而处于弃用状态.我现在无法花时间找到备份文档,但最近我确实看到了.
简而言之:::ng-deep在创建替代品之前继续使用及其替代方案 - 弃用只是提前通知,以便在实际变更实现时人们不会瞎了眼.
- 更新 -
https://drafts.csswg.org/css-scoping-1/ 如果您有兴趣,这是提案草案.看起来他们正在为阴影dom树中的元素开发一组强大的选择器; 一旦获得批准,这个规范,我认为将通知角度克隆,如果有一个(即角度可能不需要实现自己的选择器一旦它在浏览器中生效).
J. *_*the 34
深层样式的简单易行的替代方法是使用父组件的元素选择器的常见样式。所以如果你在 hero-details.component.css 中有这个：
:host ::ng-deep h3 {
font-style: italic;
}
在styles.css中会变成这样：
app-hero-details h3 {
font-style: italic;
}
基本上，深层样式是一种未封装的样式，因此在我看来，它在概念上更像是一种普通样式，而不是组件样式。我个人不会再使用深度样式了。重大版本更新中的重大更改是正常的，不推荐使用的功能删除是公平的游戏。
Jos*_*man 10
正如之前有人所说，如果您使用第三方库，几乎不可能避免::ng-deep偶尔使用一次。但是当::ng-deep浏览器不再支持时，您将如何处理以前的项目？
为了为那一刻做好准备，我将提出以下建议：
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.scss'],
encapsulation: ViewEncapsulation.None
})
<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>
.app-example-container {
/* All the CSS code goes here */
.mat-tab-group .mat-tab-label {color: red;}
}
对未来的自我说明：https : //angular.io/guide/component-styles
这应该是寻找官方替代品/ways-to-go 的第一个地方
要绕开已弃用的设备::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包装起来，如下所示：
app-header {
// your styles here and any child component styles can go here
}
现在，此处指定的样式将归因于子组件，因此添加CSS时，您必须特别注意css选择器，并注意p和q（可能会添加Angular应用中指定的子选择器，然后添加其样式）。
由于上面的段落，我说这不是最好的方法，但这对我很有帮助。