Option to change style from being added to the HTML DOC head, instead append it to right before the react app "Root" in a dom shadow mode

[mhmo91]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

MUI styles are bing added globally to the HTML Doc Top level head... that's fine if your app is a standalone application, but imagine you wanna ship your react app built with MUI as a widget to be used inside another website (potentially also using MUI), even when we wrap the app inside a custom element, MUI always appends the style tag to the top level head which ends up breaking the style of the hosting website.

Motivation 🔦

Being able to build your app as a widget and ship it to million of the website with a single script where your app lives inside a shadow Dom element is a demand that will only keep growing.

The only alternative at the moment would be to embed the widget as an iframe which is not a perfect fit in many cases specially when we can leverage the browser's support for custom html element

[eps1lon]

MUI always appends the style tag to the top level head which ends up breaking the style of the hosting website.

Our styles are scoped to the components. They shouldn't affect global styles unless you use CssBaseline. We have a scoped variant for that as well with ScopedCssBaseline.

Could you provide a reproduction that illustrates the concrete issue you have?
This codesandbox.io template is a good starting point.

For shadow DOM support see #17473

[oliviertassinari]

@mhmo91 Also, please refer to this https://material-ui.com/styles/advanced/#insertionpoint option to move the styles inside the shadow dom. You could ask @NMinhNguyen for more details on how to proceed. I believe he has experience with doing it.

[mhmo91]

@oliviertassinari Thanks a Million!

Just an update though for whoever might land here, don't try the insertion point mechanism on https://codesandbox.io/ as it won't work