[SOLVED] View Encapsulation Emulated, is it possible to escape emulated encapsulation within a stylesheet?

View Encapsulation Emulated, is it possible to escape emulated encapsulation within a stylesheet?

I have a situation where i am using a jQuery plugin to resize a div. When using emulated view encapsulation this element is not getting the attribute prefix for the style in my stylesheet to target. This makes sense because i am modifying the DOM without angular's knowledge (which i know is not best practice).

Element created from plugin - without attribute

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

Element defined in angular HTML - with attribute

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

I would prefer to keep using Emulated ViewEncapsulation for everything else in this component to prevent any style's leaking.

I was wondering if there is anyway for me to target a single class from my stylesheet without ViewEncapsulation? Or if anyone has any suggestions for how best to tackle this?

Thanks in advance.

Solution

This is where the (deprecated) ::ng-deep comes in play:

In your templates stylesheet:

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

This will target any child element with the class ui-resizable-handle from your component, regardless if it's declared in the template, a child component or dynamically added with a third party library, because this will compile to something like:

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