ng-deep在Angular内部是如何工作的？

Question

我正在尝试弄清楚::ng-deep选择器到底是如何工作的。它如何省略随机的nghost和ngcontent属性名称？

提前感谢

Answer 1

如果在关闭了视图封装的组件中使用::ng-deep，它将保留在那里。因为这是无效的CSS，所以一些规则会被破坏。它是静默的和部分失败的，因为CSS解析器只是将::ng-deep视为未知的选择器。

如果我们希望我们的组件样式级联到组件的所有子元素，而不是页面上的任何其他元素，我们目前可以通过组合使用:host和::ng-deep选择器来实现。

:host ::ng-deep h2 {
    color: red;
}

仅供参考：::ng-deep伪类选择器还有两个别名：>>>和/deep/，这三个别名很快就会被删除。

https://blog.angular-university.io/angular-host-context/

How and Where to use ::ng-deep?