UserDialog component bug within ShadowDOM

[claudiachua]

Hi team, (continuing off #3196), when I encapsulate the UserDialog component into ShadowDOM, it only allows me to expand and collapse the UserDialogList once and then it remains hidden forever. I'm still unsure if this is a bug or if I'm doing something differently - would like to get some eyes on this issue. Thanks!

I managed to reproduce this issue in this CodeSandbox: https://codesandbox.io/p/sandbox/paste-userdialog-in-shadowdom-6ssnln?file=%2Fsrc%2FApp.tsx%3A105%2C29

Update: The above issue does not happen if I close the popover by clicking outside or with esc key. It only happens when I attempt to close the popover with the arrow button.

[claudiachua]

So I managed to display the UserDialog by toggling "visible" in the component (I know its not ideal). However, I noticed there was another issue - the X coordinate of transform: translate(x,y) changes when closing UserDialog the second time. UserDialog will render outside of the screen/view the next time it opens out. Not sure what is causing the change in translate coordinates.

CodeSandBox: https://codesandbox.io/p/sandbox/paste-userdialog-in-shadowdom-forked-spmsvr?file=%2Fsrc%2FApp.tsx%3A58%2C1-60%2C24

screen_recording.mp4

[TheSisb]

Hi @claudiachua,

Interesting discovery! I tried to get to the bottom of this on my end and basically traced it back to our underlying popover library (reakit) not working in the shadow DOM: https://codesandbox.io/p/sandbox/paste-userdialog-in-shadowdom-6ssnln?file=%2Fsrc%2FApp.tsx%3A105%2C29

If you're able to work around it manually as you've described above, then awesome! As of now, supporting the shadowDOM is something that we want to enable however it falls pretty low on our priority queue.

I'd like to ask for more context on what you are trying to achieve, and if the ShadowDOM is really the right direction. It's a useful piece of technology but also very niche and usually has workarounds available at the regular DOM level. Would you mind sharing the use-case and some other approaches you explored please? This may help us better understand the scope of the issue. Thanks!

[claudiachua]

Hi @TheSisb , Thanks for the update! I understand that supporting shadowDOM is low priority for the team (just trying my luck here 😅 ).

My team is trying to create a layout with paste components on a repo that's build on python/php - we are using the react-to-webcomponents lib to translate our React code (w/ paste components) to use on that repo. Hence, the need for ShadowDOM since there will be a clash in styling without it.

[claudiachua]

Instead of relying on ShadowDOM support, I realize the easier workaround is to add/overwrite the CSS styles to address the styling differences. Closing this discussion. Thanks @TheSisb and @SiTaggart for the help 🚀 .

[TheSisb]

No problem! Glad this was resolved! Re-opening and marking as answered in case this helps someone else in the future.