Place CdkOverlay inside angular/elements webcomponent

Question

I have a more complex Angular-application that i want to deploy as a angular/elements webcomponent. The app makes use of mat-dialog and the webcomponent will also not take 100% of the browser windows size. My problem is that the cdk-overlay for the mat-dialog is per default added to the body of the html page and my dialogs are opening outside of the webcomponent.

I would like to place the overlay inside the webcomponent, so it does not interfere with the html outside the component.

I tried to provide a custom OverlayContainer as described in the first answer here: Add MatDialog popup to Angular Root and not to body

However, my angular app is not bootstrapping as i use angular/elements to build a webcomponent and therefore not use the modules bootstrap. My custom OverlayContainer is just not used.

Does anyone know a solution for this?

Thank you!

Answer 1

I had a similar situation. I was exporting one of my components as a custom web component ("Angular Elements"), using ShadowDom encapsulation. The problem was that styles from the consuming page would still leak into dialogs, datepickers, etc. because the overlay is added to the body, not in the shadow-root.

I found the solution you linked worked pretty well, with a couple changes:

1. Use position: fixed instead of position: absolute so the dialog will stay centered on screen.
2. Something like document.querySelector('#angular-app-root') didn't seem to find my element when I had it in the component inside the shadow-root. Instead, I ended up with something like document.querySelector('my-exported-web-component')?.shadowRoot?.querySelector('#angular-app-root');