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

[MeAkib]

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 ?

[kolkov]

Hello everyone!

This is a known limitation with the current architecture. The editor uses document.getElementById() which doesn't work inside Shadow DOM.

Root Cause

// ae-toolbar.component.ts line 189-195
triggerButtons() {
  this.buttons.forEach(e => {
    const elementById = this.doc.getElementById(e + '-' + this.id); // ← Problem!
    // ...
  });
}

Issue: document.getElementById() searches the entire document, not the Shadow DOM tree.

Current Status (v3.0.2)

Not Supported:

• ❌ ViewEncapsulation.ShadowDom
• ❌ Angular Elements (Web Components) without workarounds
• ❌ Custom Shadow DOM implementations

Supported:

• ✅ ViewEncapsulation.None (default)
• ✅ ViewEncapsulation.Emulated
• ✅ Regular Angular components

Workarounds

Option 1: Use Emulated Encapsulation

@Component({
  selector: 'my-editor',
  template: '<angular-editor [(ngModel)]="content"></angular-editor>',
  encapsulation: ViewEncapsulation.Emulated,  // Works!
  styles: [`
    /* Scoped styles work with Emulated */
    ::ng-deep angular-editor {
      /* Your custom styles */
    }
  `]
})

Option 2: Namespace Your Styles

/* Prefix all your editor-related styles */
.my-editor-wrapper angular-editor {
  /* Your styles */
}

Option 3: Use ::ng-deep (Deprecated but works)

::ng-deep {
  angular-editor {
    /* Styles */
  }
}

Proper Fix (Needs Code Changes)

For Shadow DOM support, the code needs to:

1. Use ElementRef instead of document

// Instead of
const element = this.doc.getElementById(id);

// Use
const element = this.elementRef.nativeElement.querySelector(`#${id}`);

2. Pass shadow root context

@Inject(DOCUMENT) private doc: any,
private elementRef: ElementRef  // Add this

3. Update all getElementById calls

• ae-toolbar.component.ts - triggerButtons(), triggerBlocks()
• Other components using getElementById

Feature Request

I'm adding this as a feature request for v3.1.0+. Shadow DOM support requires:

• Refactor getElementById → querySelector with ElementRef
• Test with Angular Elements
• Ensure Web Component compatibility
• No breaking changes to existing usage

Temporary Solution

If you MUST use Shadow DOM now:

// Monkey patch (not recommended for production)
@Component({
  // ...
  encapsulation: ViewEncapsulation.ShadowDom
})
export class MyComponent implements AfterViewInit {
  @ViewChild(AngularEditorComponent) editor: AngularEditorComponent;
  
  ngAfterViewInit() {
    // Disable button highlighting to avoid errors
    this.editor.showToolbar = false;
    // Or implement custom toolbar outside Shadow DOM
  }
}

Related Issues

This affects:

• Undo and Redo Button affects the other fields in the page. #486 - Angular Elements
• Any Web Component use case
• Micro-frontend architectures

Tracking

Adding labels:

• enhancement - Shadow DOM support
• help wanted - Community contributions welcome
• v3.1.0 - Target release

Would be happy to review a PR for this! The main work is replacing document.getElementById() with ElementRef.querySelector().

Thanks for reporting and sorry for the inconvenience. This is a legitimate architectural limitation we need to address.