View Encapsulation Emulated, возможно ли избежать эмулированной инкапсуляции в таблице стилей?

Question

У меня есть ситуация, когда я использую плагин jQuery для изменения размера div. При использовании эмуляции эмулированного представления этот элемент не получает префикса атрибута для стиля в моей таблице стилей, предназначенного для цели. Это имеет смысл, потому что я модифицирую DOM без знания angular (что, я знаю, не лучшая практика).

Элемент, созданный из плагина - без атрибута

<div class="ui-resizable-handle ui-resizable-e custom-pointer" style="z-index: 90;"></div>

Элемент, определенный в angular HTML - с атрибутом

<div _ngcontent-fav-c294 class="inner-container"></div>

Я бы предпочел продолжать использовать эмуляцию ViewEncapsulation для всего остального в этом компоненте, чтобы предотвратить утечку любого стиля.

Мне было интересно, есть ли у меня какой-либо способ нацелиться на один класс из моей таблицы стилей без ViewEncapsulation? Или, если у кого-то есть предложения, как лучше всего с этим справиться?

Заранее спасибо.

Answer 1

Здесь (устаревший) ::ng-deep вступает в игру:

В вашей таблице стилей шаблонов:

:host ::ng-deep .ui-resizable-handle {
  background-color: pink;
}

Это будет предназначаться для любого дочернего элемента с класс ui-resizable-handle из вашего компонента, независимо от того, объявлен ли он в шаблоне, дочернем компоненте или динамически добавлен с помощью сторонней библиотеки, потому что это скомпилирует что-то вроде:

[_nghost-fav-c294] .ui-resizable-handle {
  background-color: pink;
}