Shadow root / web component support

[BMCwebdev]

Description

Quick question: does UntitledUI support use inside of shadow dom? If I wanted to build a web component for example. Additionally, does it work on mobile devices when inside a shadow dom? Thank you!

Additional context

No response

[deebov]

Hey @BMCwebdev, we haven't tested this one yet but we did have a similar case where we were rendering our components inside an inline iframe and programmatically copying the <link rel="stylesheet" /> from the root document and injecting all of them into the inline iframe and this did the job for us.

Untitled UI itself isn't any different than any other libraries if you want to render the components inside a shadow DOM. Like with any library, you'd have to make sure the CSS styles are included in the shadow DOM.

[BMCwebdev]

I’ve been building our company’s design system with React Aria as the base layer. Recently, we needed to build an app inside a Shadow DOM. That’s when I realized how limited React Aria’s out-of-the-box support is for Shadow DOM environments. They do provide some helpful utilities, especially for portaling overlays, but several core behaviors don’t work without custom solutions.

For example, touch events, mobile scrolling, and “click outside to close” interactions (on both mobile and desktop) all break inside a Shadow DOM. None of these work correctly without additional handling. If it’s useful, I can share a code sample showing a minimal React Aria setup running inside a Shadow DOM.

Since you’ve also worked extensively with React Aria, I was curious whether you’ve encountered these same issues and if you’ve implemented any solutions or workarounds.

I’ll be posting an update tomorrow on the React Aria GitHub discussion detailing my findings and the fixes I’ve implemented. I’ve been in a few discussion threads with the team there, so I’m hoping it will help others facing the same challenges. I can send you the link once it’s up if you’re interested.

And just to clarify, I’m not a customer of UntitledUI. It looks great, but it’s a bit out of my price range at the moment. I simply wanted to reach out and compare notes.