Generated CSS effects on other areas. Tried with ShadowDom but didn't work.

[akib1997]

Generated CSS effects on other areas. Tried with ShadowDom but didn't work. Generated style tag overrides my CSS and effects them. I'm building a template Editor.

[Maransatto]

Hi @akib1997 why did you close this issue? I'm with the same issue.

I added the component into my own component with ViewEncapsulation.ShadowDom but now I'm facing the following error:

core.mjs:7635 ERROR TypeError: Cannot read properties of null (reading 'classList')
    at EmulatedEncapsulationDomRenderer2.removeClass (platform-browser.mjs:619:12)
    at BaseAnimationRenderer.removeClass (animations.mjs:280:23)
    at kolkov-angular-editor.mjs:642:24
    at Array.forEach (<anonymous>)
    at AngularEditorToolbarComponent.triggerButtons (kolkov-angular-editor.mjs:635:22)
    at AngularEditorComponent.exec (kolkov-angular-editor.mjs:1138:28)
    at AngularEditorComponent_Template_div_click_5_listener (kolkov-angular-editor.mjs:1203:2299)
    at executeListenerWithErrorHandling (core.mjs:15637:16)
    at wrapListenerIn_markDirtyAndPreventDefault (core.mjs:15672:22)
    at HTMLDivElement.<anonymous> (platform-browser.mjs:459:38)

[tahsinpol]

+1 I have the same problem

triggerButtons() { if (!this.showToolbar) { return; } this.buttons.forEach(e => { const result = this.doc.queryCommandState(e); const elementById = this.doc.getElementById(e + '-' + this.id); if (result) { this.r.addClass(elementById, 'active'); } else { this.r.removeClass(elementById, 'active'); } }); }

The object "this.doc" must be shadowRoot. Otherwise it cannot find it by doing getElementById from the parent document object

[matpinsdorf]

same problem here, with ViewEncapsulation.ShadowDom solve the problem but this console error keeps there "cannot read properties of null (reading 'classList')"

[DautbegovicDavid]

Same issue, did anybody find a workaround ?