[Slider] Thumbs badly styled, when shown in Shadow DOM

[janeksmielowski]

Hi,

I have an issue, when putting MUI Slider into Shadow DOM. While I managed to inject its styles via StylesProvider and jss, I still have a problem with badly styled tooltips, indicating the selected value.

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

Current Behavior 😯

The problem is that the tooltips are shown at the end of document.body (via some portal, I suppose). This causes the tooltips not being styled, because its styles are injected into Shadow DOM, which ensures encapsulation.

Expected Behavior 🤔

Possibility of passing custom root prop for tooltips, that defaults to document.body.

Steps to Reproduce 🕹

Steps:

1. Attach shadow root to some container
2. Wrap the content into StylesProvider using jss
3. Put Slider inside

Context 🔦

Your Environment 🌎

• @material-ui/core 4.9.10
• jss 10.5.1
• react 17.0.1

[oliviertassinari]

See #17473. We currently don't aim to support shadow DOM natively. We leave it up to each developer to do the legwork. If you have a live reproduction on CodeSandbox, please share it there. The community might help, StackOverflow could be another place to ask too.

You can customize the container of the tooltips.

[janeksmielowski]

Not helpful at all, but I finally managed to solve the problem. I'll leave it here for anyone having the same.

So I passed MUI Tooltip component to the Slider as the ValueLabelComponent, which used PopperProps. It accepts container prop, where I passed a reference to my container, instead of default document.body.

[oliviertassinari]

@janeksmielowski If you have a codesandbox with the fully working solution, it would be perfect 👌

[janeksmielowski]

Sure, here you go https://codesandbox.io/s/silly-bas-0hs2z
Using PopperProps causes tooltip to be injected into container.
Otherwise it is attached to body.