CSS styles don't work for autocomplete component when embedded in a shadowRoot

[tiffz]

[x] The issue is present in the latest release.
[x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

We're trying to add the Material UI v5 Autocomplete component to our existing LitElement (Web Component-based app).

We're using with JSS set to use a custom insertionPoint - our element's shadowRoot. This causes the styles to be properly inserted inside of ShadowDOM, but the autocomplete component also contains some dom elements that seem to be appended to the document's body (outside of our shadowRoot).

Because of this, half of the component is styled when we inject our styles into our shadowRoot, but the other half of the component (the dropdown menu) is not styled.

Expected Behavior 🤔

It'd be nice if there was a clear way to get styles for this component to work inside of a shadowRoot. If the entire element was inside of the shadowRoot (where our React mount point is), then the styles would work.

Alternatively, if there was a way for us to apply the styles for the autocomplete component both globally and within our shadowRoot, then the component would also be styled. But as is, there seems to be no way to get this component properly styled when it's inside of a shadowRoot.

Steps to Reproduce 🕹

Steps:

1. Create a Web Component that's rendered somewhere on a page.
2. Mount React into the shadowRoot of that component.
3. Render Material UI's in that React mountPoint anywhere.
4. Wrap in a that has jss set to use a custom insertionPoint of the Web Component's shadowRoot.

Context 🔦

I'm trying to embed Material UI components inside of an existing Web Components-based app, and this issue makes using the autocomplete component infeasible.

Your Environment 🌎

`npx @material-ui/envinfo`

  System:
    OS: macOS 11.2
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 14.04 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Managers:
    Homebrew: 2.5.6 - /usr/local/bin/brew
    pip2: 20.2.4 - /usr/local/bin/pip2
    pip3: 18.1 - /usr/local/bin/pip3
    RubyGems: 3.0.3 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.30.0.365. - /usr/local/git/current/bin/git
    Clang: 1103.0.32.29 - /usr/bin/clang
  Servers:
    Apache: 2.4.46 - /usr/sbin/apachectl
  Virtualization:
    Docker: 20.10.2 - /usr/local/bin/docker
  IDEs:
    Nano: 2.0.6 - /usr/bin/nano
    Vim: 8.2 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Perl: 5.28.2 - /usr/bin/perl
    PHP: 7.3.24 - /usr/bin/php
    Python: 2.7.16 - /usr/bin/python
    Python3: 3.6.8 - /usr/local/bin/python3
    Ruby: 2.6.3 - /usr/bin/ruby
  Databases:
    MySQL: 5.6.47 - /usr/local/opt/mysql@5.6/bin/mysql
    SQLite: 3.32.3 - /usr/bin/sqlite3
  Browsers:
    Chrome: 88.0.4324.150 (used this browser)
    Firefox: 85.0
    Safari: 14.0.3

[oliviertassinari]

See #17473. It seems that you don't need the isolation in your case. I would recommend staying away from shadow DOM as much as you can. If you really need to, you can customize the container of the portaled element, or even disable the portal