Environment

Can be provided if needed

Link to minimal reproduction

Can be provided if needed

Steps to reproduce

See description

Describe the bug

First of all, thank you for this incredible component library! It is, in my opinion, the best unstyled component library available.

However, I have noticed that some components do not work correctly when used inside a Shadow DOM. Specifically:

1. When placing a Popover inside a Dialog, clicking on the Popover content causes the entire Dialog to close unexpectedly.
2. When using an input field inside a Dialog that dynamically updates content within the Dialog, the focus keeps switching back to DialogContent, disrupting the user experience.

It would be great if the library provided better support for Shadow DOM environments, especially for users leveraging Vue.js’s defineCustomElement function, where the entire application runs inside a Shadow DOM.

Possible Solution:

In most cases, the issue arises from direct usage of document instead of retrieving the correct root node. A common fix is to use .getRootNode() on the element instead of document.

For example, modifying FocusScope.vue (L125-L133) to use container.getRootNode() instead of document might (untested) resolve the focus issue with input fields inside a Dialog.

Would love to hear your thoughts on this, and I’d be happy to help test any potential fixes!

Expected behavior

No response

Context & Screenshots (if applicable)

No response