If you need to render overlay content inside a shadow dom Angular component, I have built a quick proof-of-concept showing how to do it:

https://stackblitz.com/edit/angular-overlay-inside-shadow-dom?file=src%2Fshadow-dom-with-overlay-override%2Fshadow-dom-with-overlay-override.ts

I am working on a project that requires embedding Angular Elements web-components inside a server rendered legacy app.

The app has many global styles for common elements (such as buttons) that break Angular Material components. For us, the best solution so far is to use shadow dom to limit what global styles can do to our web-components, and that required finding a way to render any overlays inside the shadow dom itself.