Skip to content

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

@rxliuli

Description

@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: #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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions