使用ViewEncapsulation.None穿透阴影边界

Question

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

假设我有一个组件：

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

从外部，我可以通过执行以下操作来为tooltip内部的元素设置样式：

::ng-deep .tooltip-content {}

由于::ng-deep已过时，因此我开始探索替代方法。我的第一个想法是在ViewEncapsulation.None上设置tooltip，但是那会影响使用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 { ... }
}

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