如何限制::ng-deep样式作用范围，避免影响父组件？

当直接使用::ng-deep时，它会突破Angular的样式隔离机制，导致样式向上渗透到父组件。要限制这种行为，最直接有效的方法是结合:host选择器使用：

• 用:host限定样式的作用范围为当前组件的宿主元素，再配合::ng-deep，就能让样式只穿透到当前组件内部的子元素，不会影响父组件。

修改后的代码如下：

:host ::ng-deep label {
    width: 164px;
    height: 22px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: red;
}

另外还有两种可选方案：

• 给子组件的目标元素添加专属类名，比如child-label，然后用::ng-deep .child-label来定位样式，这样只会作用在子组件带该类的元素上。
• 调整组件的ViewEncapsulation设置（不推荐）：将组件的encapsulation设为ViewEncapsulation.None，但这会取消组件的样式隔离，需要手动给所有样式加组件专属类名来避免全局污染，维护成本较高。

最推荐的还是第一种:host + ::ng-deep的组合，既能实现对子组件的样式穿透，又能严格限制作用范围，避免影响父组件。

内容的提问来源于stack exchange，提问作者Barnit Basnet