css - :host ::ngdeep 与通过 angular.json 添加 css 相比如何实际工作

Question

使用 Angular 5 向第三方组件 A 添加一些 css。

在这个第三方组件 AI 中添加了另一个第三方组件 B。

为了让第三方组件 A 工作，我必须将其组件 A 的 css 文件添加到样式属性下的 angular.json 中。（这就是组件 A 的构建方式。）

如果我这样做。组件 A 和组件 B 都具有正确的 css。组件 A 的 css 不会影响组件 B 的 css。

由于一些公司限制。我不允许这样做。

所以我必须通过组件:host ::ngdeep like this 的home-to-component-A-component.scss文件添加组件A的csshome-to-component-A-component

:host ::ng-deep #component-a {
   // all the component A css
}

然后定期添加这个scss home-to-component-A-component，

@Component({
    styleUrls: ['home-to-component-A-component.scss']
})

有效。但它完全弄乱了位于组件 A 内部的组件 B 的 css。因为组件 A 的某些 css 覆盖了组件 B 的 css。（他们使用不同的类名）

如果我使用组件 Aencapsulation: ViewEncapsulation.None的 css 将 css 添加到组件 A 也会以同样的方式弄乱组件 B 的 css。

我想深入了解，使用:host ::ngdeepVS 将 css 添加到angular.json. 尤其是这些将如何影响组件的 css 屏蔽。