Select Builder doesn't work in Shadow DOM

[KuhArt]

Describe the bug

I want to use the Svelte app in Shadow DOM to encapsulate CSS and JS app code. I decided to use shadcn-svelte which uses Melt UI under the hood. However, I noticed that Builders that use document.querySelector or document.getElementById are not working in Shadow DOM. For example, openMenu method in Listbox Builder doesn't work.

The code https://github.com/melt-ui/melt-ui/blob/879fa115c353786bfbcb283fabfcc45388171efd/src/lib/builders/listbox/create.ts#L211 will not find a trigger in the Shadow DOM.

Reproduction

https://stackblitz.com/edit/vitejs-vite-zfbsp4?file=src%2Fmain.js

In this small example, the shadow root is created with Melt UI Inside. The Select component doesn't work as expected.

Logs

No response

System Info

System:
    OS: macOS 14.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 62.38 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
    pnpm: 8.6.9 - /usr/local/bin/pnpm
  Browsers:
    Edge: 122.0.2365.80
    Safari: 17.1

Severity

blocking all usage of Melt UI

[ls-bit]

Maybe related, e.g. Date Field and Date Picker of Bits UI also do not work properly in Shadow DOM

[huntabyte]

I think I have an idea of how to fix this.

[KuhArt]

Hey @huntabyte, could you share your thoughts? I'll try to help whenever I'm available.

[huntabyte]

I think rather than using document.*, we need to get the owner document of the element the action was applied to, and query that instead.