bug: wxt cannot be used with the Dialog/DropdownMenu components of svelte shadcn/ui.

[rxliuli]

Describe the bug

The Content Script uses the shadow DOM mode when injecting UI.

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

Code

import { mount, unmount } from 'svelte'
import '../app.css'
import App from './content/app.svelte'

export default defineContentScript({
  matches: ['*://*.google.com/*'],
  cssInjectionMode: 'ui',
  async main(ctx) {
    const ui = await createShadowRootUi(ctx, {
      name: 'example-ui',
      position: 'inline',
      anchor: 'body',
      onMount: (container) => {
        mount(App, { target: container })
      },
      onRemove: (app) => {
        unmount(App)
      },
    })

    // 4. Mount the UI
    ui.mount()
  },
})

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.

Code

<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>

Supplement, I'm actually not quite sure whether this belongs to a bug in svelte shadcn/ui or wxt, but I can't reproduce it using svelte shadcn/ui alone because I'm not very clear on how wxt's shadow DOM injects the UI.

Reproduction

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

Steps to reproduce

pnpm i && pnpm dev

System Info

System:
    OS: macOS 15.2
    CPU: (12) arm64 Apple M2 Max
    Memory: 6.72 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

Used Package Manager

pnpm

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[aklinker1]

You need to configure the teleport to put elements inside the shadow root. By default, teleports put elements outside the shadow root, so the CSS is not applied.

https://wxt.dev/guide/resources/faq.html#my-component-library-doesn-t-work-in-content-scripts

[rxliuli]

In fact, I have already configured it. Refer to the code, you can clone the repo to reproduce it.

<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>

[aklinker1]

Woops, sorry! This is a common question, so I reflexively responded with my standard response before fully reading your description. Checking your reproduction out now

[aklinker1]

Looks like this is a bug with the UI library? There's a weird translate up -200%, several CSS vars are undefined, and the Z index is messed up 🤔 All probably because of the undefined CSS vars.

css.mp4

I would guess this isn't related to WXT. My guess is that the library just doesn't support shadow DOMs. It works fine if I use createIntegratedUi instead of createShadowRootUi.

Maybe look into why the CSS vars are undefined, probably related to being in a shadow DOM.

[rxliuli]

Strange, that seems to be a bug in svelte shadcn/ui, or it could be a bug in the lower-level bits-ui. I'll check the specific reason. Thank you for your help.