Прохождение границы тени с помощью 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 уникальном стиле без каких-либо побочных эффектов