CDK overlay container element should be configurable

[jianliao]

Bug, feature request, or proposal:

This is a feature request and proposal. If Material team think it doable, I would love to provide a PR for this.

What is the expected behavior?

We need to run an Angular app on a legacy web page. In order to avoid CSS leaking in from page. We want to enable ViewEncapsulation.ShadowDom on app root component. As we are using a component library which all the components use ViewEncapsulation.None strategy, we have to import the CSS from app root component's scss file. Everything works as expected, except anything on overlay because the css is in the shadow dom. As a work around, we have to reference all those css from index.html, but it is not ideal(download the same css twice). I am wondering if it is possible to configure the overlay container to be inside of the shadow dom, so that we share the same css.

What is the current behavior?

Currently, it is hard code to be document.body in overlay-container.ts.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

StackBlitz does not allow me to enable ViewEncapsulation.ShadowDom

What is the use-case or motivation for changing an existing behavior?

I am not changing the existing behavior, but just make more flexible.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Latest Material and Angular.

Is there anything else we should know?

[crisbeto]

This is the whole point of having the OverlayContainer as a provider: it allows you to provide another value. There's an example of how to do it under the "Fullscreen overlays" section in the docs.

[jelbourn]

@jianliao is there anything about the existing OverlayContainer that would prevent you from doing this?

[jianliao]

The solution works perfectly. Thanks.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}