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

[rxliuli]

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.

However, the Sheet component still cannot work properly in the shadow DOM at present. After checking, I found that one of the errors was caused by not passing the getRootNode parameter when using useRefById in the use-dismissable-layer.svelte.ts file, which is an internal implementation (indirectly dependent on svelte-shadcn). I had to patch it locally using pnpm.

[huntabyte]

After thinking on this a bit more, I believe once this lands: sveltejs/svelte#15000 we'll be able to get a reference to the node without needing to specify an id which also means we can get the node's owner document to seamlessly support shadow DOM without needing to create a global provider of sorts.

At that point, the useRefById function would end up being an anonymous attachment that sets a reference to the node in internal Bits state.

[rxliuli]

Just sharing the current temporary solution, which is basically patching the svelte-toolbelt module. Special thanks to @MichaelBrunn3r for the explanation ¹.

pnpm patch svelte-toolbelt 
code node_modules/.pnpm_patches/[email protected]/dist/utils/use-ref-by-id.svelte.js
# paste code
pnpm patch-commit './node_modules/.pnpm_patches/[email protected]'

// node_modules/.pnpm_patches/[email protected]/dist/utils/use-ref-by-id.svelte.js
import { watch } from "runed";
import { onDestroyEffect } from "./on-destroy-effect.svelte.js";
import { getContext } from "svelte";
function getRootNodeFromContext() {
    return getContext("ShadcnConfig")?.portal;
}
/**
 * Finds the node with that ID and sets it to the boxed node.
 * Reactive using `$effect` to ensure when the ID or deps change,
 * an update is triggered and new node is found.
 */
export function useRefById({ id, ref, deps = () => true, onRefChange, getRootNode }) {
    watch([() => id.current, deps], ([_id]) => {
        const rootNode = getRootNode?.() ?? getRootNodeFromContext() ?? document;
        const node = rootNode?.querySelector(`#${_id}`);
        if (node)
            ref.current = node;
        else
            ref.current = null;
        onRefChange?.(ref.current);
    });
    onDestroyEffect(() => {
        ref.current = null;
        onRefChange?.(null);
    });
}

Then set the context in your root component like layout.svelte or app.svelte.

<script lang="ts">
  import { setContext } from 'svelte'

  setContext(
    'ShadcnConfig',
    document
      .querySelector('custom-element')
      ?.shadowRoot?.querySelector('body')!,
  )
</script>

Footnotes

1. https://github.com/huntabyte/bits-ui/issues/1120#issuecomment-2645783720 ↩