能否使用多个::ng-deep为深层嵌套的Angular组件添加样式？

嵌套结构说明 #

你提到的所有组件均开启默认视图封装的嵌套DOM结构如下：

<component1>
  <component2>
    <div>
      <component3>
        <div>
          <div>
            <div>
              <div>
                <component4> Can a style be applied here using ng-deep?</component4>
              </div>
            </div>
          </div>
        </div>
      </component3>
    </div>
  </component2>
</component1>

可行性结论 #

技术上完全可行。
Angular的::ng-deep伪类的作用就是穿透当前组件的视图封装限制，让样式作用到所有子组件的DOM节点上，和嵌套层级没有关系，不管隔了多少层普通DOM节点或者子组件都能生效。

实现代码 #

直接在component1的样式文件中添加以下代码即可命中component4：

/* component1.component.css 写法 */
:host ::ng-deep component4 {
  /* 这里写你要施加的样式，举个例子 */
  color: red;
  padding: 8px;
  border: 1px solid #eee;
}

加上:host前缀是为了避免样式泄露到全局，只会作用于当前component1内部的component4实例，不会影响其他位置的同标签组件。

额外提示 #

尽管::ng-deep已经被Angular官方标记为废弃特性，但目前所有已发布的稳定版本都完整支持该能力，你确认能接受该方案的副作用的前提下可以放心使用。

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