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

Question

假设我有这样一棵 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'。假设所有组件都被封装..

编辑：我很清楚这在很多方面都不理想，但问题来了？！

Answer 1

是的，是的。

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

意味着在 component1.scss 中添加以下代码将更改 <component4>

的背景颜色

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

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

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

Is it possible to use multiple ::ng-deep identifiers to apply a style on a deeply nested component?

sass

angular