bug: The components Dialog/DropdownMenu of svelte shadcn/ui cannot be used together in the shadow dom.

[rxliuli]

Describe the bug

Kapture.2025-01-08.at.10.14.06.mp4

Then use the Dialog component to pop up a window within the component, and use the DropdownMenu component to pop up a window within the Dialog component, but the pop-up of the DropdownMenu is not visible.

<script lang="ts">
  import * as Dialog from '$lib/components/ui/dialog/index.js'
  import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js'

  const container = document
    .querySelector('example-ui')
    ?.shadowRoot?.querySelector('body')!
</script>

<Dialog.Root>
  <Dialog.Trigger>Open</Dialog.Trigger>
  <Dialog.Content
    portalProps={{
      to: container,
    }}
  >
    <Dialog.Header>
      <Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
      <Dialog.Description>
        <DropdownMenu.Root>
          <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
          <DropdownMenu.Content
            portalProps={{
              to: container,
            }}
          >
            <DropdownMenu.Group>
              <DropdownMenu.GroupHeading>My Account</DropdownMenu.GroupHeading>
              <DropdownMenu.Separator />
              <DropdownMenu.Item>Profile</DropdownMenu.Item>
              <DropdownMenu.Item>Billing</DropdownMenu.Item>
              <DropdownMenu.Item>Team</DropdownMenu.Item>
              <DropdownMenu.Item>Subscription</DropdownMenu.Item>
            </DropdownMenu.Group>
          </DropdownMenu.Content>
        </DropdownMenu.Root>
      </Dialog.Description>
    </Dialog.Header>
  </Dialog.Content>
</Dialog.Root>

I discussed this issue with the maintainer of wxt, and I also tried testing with shadcn/ui in React, and found that it is indeed an error in svelte shadcn/ui. ref: wxt-dev/wxt#1340

Reproduction

https://github.com/rxliuli/shadcn-ui-wxt-error-demo

Logs

No response

System Info

System:
    OS: macOS 15.2
    CPU: (12) arm64 Apple M2 Max
    Memory: 6.42 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: 9.15.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.97
    Chrome: 131.0.6778.205
    Safari: 18.2

Severity

annoyance