bug(Sheet/Dialog): Clicking the overlay in the shadow DOM does not close it.

[rxliuli]

Describe the bug

Kapture.2025-02-04.at.10.45.02.mp4

I have currently rewritten part of the svelte-shadcn code locally, specifically the Sheet.Root and Sheet.Overlay components. By placing the state in a custom Root component, it can be closed in the overlay. I believe this is one of the long-term issues with bits-ui's support for shadow dom, considering that the author seems to be waiting for the implementation of new Svelte features and has already removed shadow dom support from 1.0 plan. Should we consider directly fixing such errors in shadcn, or do non-UI errors have to wait for upstream fixes?
ref: huntabyte/bits-ui#828 (comment)

Reproduction

git clone https://github.com/rxliuli/shadcn-sheet-shadow-dom-error-demo
pnpm i && pnpm dev

Logs

System Info

System:
    OS: macOS 15.2
    CPU: (12) arm64 Apple M2 Max
    Memory: 1.83 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.1 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.5.0 - /usr/local/bin/npm
    pnpm: 10.2.0 - /usr/local/bin/pnpm
    bun: 1.1.6 - ~/.bun/bin/bun
    Watchman: 2024.10.07.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 131.1.73.105
    Chrome: 132.0.6834.160
    Safari: 18.2
  npmPackages:
    bits-ui: 1.0.0-next.85 => 1.0.0-next.85 
    lucide-svelte: ^0.474.0 => 0.474.0 
    svelte: ^5.15.0 => 5.19.7

Severity

blocking an upgrade

[huntabyte]

Shadow DOM support for Bits UI is a bit flakey at the moment due to how we get references to the various nodes using their IDs which enables us to support both the regular component and the child snippet.

Once this lands, we should be able to have complete shadow DOM support: sveltejs/svelte#15000