Shadow DOM support

[x0k]

Describe the bug

The Select component does not open the options list when it mounted in shadow DOM.

• bits-ui@next
• I don't know if it works in the latest version
• Also did not test other components with floating elements

GitHub Pages

Reproduction

https://github.com/x0k/bits-ui-shadow-dom-select

Logs

No response

System Info

System:
    OS: Linux 6.6 Manjaro Linux
    CPU: (12) x64 Intel(R) Core(TM) i5-10400F CPU @ 2.90GHz
    Memory: 4.77 GB / 15.56 GB
    Container: Yes
    Shell: 5.2.37 - /bin/bash
  Binaries:
    Node: 22.9.0 - /nix/store/f9yl8nlgcyazflxc2nj1cr9k9ika7v7z-nodejs-22.9.0/bin/node
    npm: 10.8.3 - /nix/store/f9yl8nlgcyazflxc2nj1cr9k9ika7v7z-nodejs-22.9.0/bin/npm
  Browsers:
    Brave Browser: 130.1.71.118
  npmPackages:
    bits-ui: 1.0.0-next.31 => 1.0.0-next.31 
    svelte: ^5.1.3 => 5.1.3

Severity

annoyance

[huntabyte]

I'm not very familiar with the Shadow DOM tbh and would be looking for community assistance in ensuring this project can support it across all components. If this is something you could help with, it'd be greatly appreciated!

[huntabyte]

Seems we could expose an optional prop to the various components call getRootNode where users can return their root node and it will default to the document.

[rxliuli]

This also led to downstream errors of svelte shadcn/ui huntabyte/shadcn-svelte#1604

[rxliuli]

I noticed that support for shadow dom was abandoned 14 hours ago, so bits-ui 1.0 will no longer consider supporting shadow dom, right?

[x0k]

Note

This is not that hard to implement.
Initially the problem was in the useRefById function from the svelte-toolbelt library. Now you can pass the getRootNode argument to this function to work correctly with the shadow DOM.

In my opinion, one of the possible solutions is to define a global context with the getRootNode function and read its value before using useRefById.

[huntabyte]

I noticed that support for shadow dom was abandoned 14 hours ago, so bits-ui 1.0 will no longer consider supporting shadow dom, right?

It's not a blocker for 1.0; it can be added after stability without breaking change.

I'd still like to have it prior to 1.0.

[huntabyte]

In my opinion, one of the possible solutions is to define a global context with the getRootNode function and read its value before using useRefById.

Yeah this is the idea. Have a <BitsConfig> component that can handle that