Based on the answers above (and a few other places) I created a quick proof of concept showing how to place overlay content inside an shadow dom Angular component:

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 legacy 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.