Angular ViewEncapsulation下如何让样式仅作用于当前及子组件（含外部组件）

可以实现，以下是3种稳定可行的实现方案：

方案1：使用 ::ng-deep 伪类（最便捷） #

无需修改组件的 encapsulation 配置，仅需在需要穿透的样式前添加 :host ::ng-deep 前缀，即可将样式限制在当前组件范围内，同时生效于内部引入的第三方组件。
示例代码：

/* 当前组件的 .css/.scss 文件 */
:host ::ng-deep .third-party-component-inner-class {
  /* 自定义样式 */
  color: #2ecc71;
  border-radius: 4px;
}

说明：:host 选择器指向当前组件的根元素，加在最前面保证所有后续样式只会匹配当前组件内部的元素，不会泄露到全局。

方案2：自定义唯一前缀 + ViewEncapsulation.None #

如果需要关闭视图封装，只需给当前组件根元素设置一个全局唯一的类名，所有组件内的样式都以该类名作为前缀，即可限制作用范围：

1. 组件模板配置：

<!-- 当前组件模板 -->
<div class="my-custom-component-xxx">
  <!-- 内部内容/第三方组件 -->
  <third-party-ui></third-party-ui>
</div>

2. 组件样式配置：

/* 所有样式都加唯一前缀 */
.my-custom-component-xxx .third-party-ui-class {
  padding: 12px;
}
.my-custom-component-xxx .local-component-class {
  font-size: 14px;
}

方案3：全局样式加范围限制 #

如果自定义样式量较大，也可以将样式写到项目全局样式文件（如styles.scss）中，前面加上当前组件的唯一标识作为前缀，效果和上述方案一致。

注意：Angular官方虽标注::ng-deep为废弃状态，但至今未给出明确的移除时间表，全版本兼容稳定可用；如果需要规避废弃API，优先选择方案2即可。

内容的提问来源于stack exchange，提问作者Ewgenij Sokolovski