Problem using ngx-quill with ViewEncapsulation.ShadowDom

[cmyksvoll]

I am trying to use ngx-quill in a custom component (created using Angular Elements). The purpose is to create Angular based plugins to be hosted in another Angular application. To ensure that styles in my Angular Elements component will not affect the hosting application, I have set encapsulation to ViewEncapsulation.ShadowDom in my component (default is ViewEncapsulation.Emulated):

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom
})

To make this work, I also import the quill css files in my test.component.scss instead of adding them to angular.json:

@import "~quill/dist/quill.core.css";
@import "~quill/dist/quill.bubble.css";
@import "~quill/dist/quill.snow.css";

My problem is that ViewEncapsulation.ShadowDom changes the behavior of the quill editor, especially for numbered lists and bullet lists. It is also not possible to use the tab key to change indent level for list items.

If I change the encapsulation back to ViewEncapsulation.Emulated, the editor works perfectly fine. But... then I risk leaking styles into the application that will host my custom component.

[KillerCodeMonkey]

If you use the default emulated encapsulation there should be nothing leaking in the host component.
Because each component and styling gets encapsulated by a custom data attribute.

This is a core functionality of angular. ;)

EDIT: If you need to support more than the latest browser versions you need a shadowdom polyfill, as well ;)

[KillerCodeMonkey]

@cmyksvoll Seems like quilljs does not support shadow dom in the current stable version:

slab/quill#2021
slab/quill#2337
slab/quill#1805