我最近一直在搞乱 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
,我如何仍然能够穿透阴影边界?
最佳答案
对于可重用组件,我总是使用 ViewEncapsulation.None
。为了避免对元素的其余部分产生副作用,我使用了带有组件标签名称的深层嵌套选择器。
HTML:
<test-component>
<div class="test">
<tooltip></tooltip>
</div>
</test-component>
scss:
test-component{
.test { ... }
tooltip { ... }
}
test-component
中的所有 tooltip
标签都具有独特的风格,没有任何副作用
关于css - 在宿主元素上使用 ViewEncapsulation.None 穿透阴影边界,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54854075/