是否可以使用多个 ::ng-deep 标识符在深度嵌套的组件上应用样式？

【问题标题】：Is it possible to use multiple ::ng-deep identifiers to apply a style on a deeply nested component?是否可以使用多个 ::ng-deep 标识符在深度嵌套的组件上应用样式？
【发布时间】：2021-10-26 12:15:41
【问题描述】：

假设我有一个这样的 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>

是否可以将样式来自父组件 (component1) 应用到深度嵌套的“component4”。假设所有组件都被封装..

编辑：我很清楚这在很多方面并不理想，但问题是什么？！

【问题讨论】：

标签： angular sass

【解决方案1】：

是的。

基本上，使用ng-deep 会破坏shadow DOM，这会将css应用于其中的每个组件。

意思是在component1.scss里面添加下面的代码会改变<component4>的背景颜色

:host &::ng-deep component4 {
    background-color: blue;
}

正如你所说，这在很多方面都不理想，我不建议你使用::ng-deep，因为它已被弃用，请改用encapsulation

【讨论】：