css - 在宿主元素上使用 ViewEncapsulation.None 穿透阴影边界

Question

我最近一直在搞乱 ViewEncapsulation 和 ::ng-deep，遇到了两个不同的问题，这激起了我的好奇心。

假设我有一个组件:

<div>
    <tooltip></tooltip>
</div>

从外部看，我可以通过以下方式为 tooltip 中的元素设置样式:

::ng-deep .tooltip-content {}

因为 ::ng-deep 已被弃用，所以我开始探索替代方案。我的第一个想法是在 tooltip 上设置 ViewEncapsulation.None，但这会影响使用 tooltip 的前端的其余部分。这不是一个好的选择。

我的第二个想法是在宿主元素上设置 ViewEncapsulation.None，然后正常设置 tooltip 的样式，而不使用 ::ng-deep 而是将 !important 附加到所需的样式。

这是如何工作的？如果 tooltip 保留其 ViewEncapsulation，我如何仍然能够穿透阴影边界？

Answer 1

对于可重用组件，我总是使用 ViewEncapsulation.None。为了避免对元素的其余部分产生副作用，我使用了带有组件标签名称的深层嵌套选择器。

HTML:

<test-component>
   <div class="test">
      <tooltip></tooltip>
   </div>
</test-component>

scss:

test-component{
   .test { ... }
   tooltip { ... }
}

test-component 中的所有 tooltip 标签都具有独特的风格，没有任何副作用