Portal prop doesn't do anything

[bergstromdev]

Describe the bug

Thanks for a great lib!

I'm trying to render the dialog on the main tag instead of the body. <main id="main> ... I've tried to pass 'main' to the portal prop but it doesn't do anything, it always renders on the body. I also tried to pass the element but same issue there.

To be able to use my theme colors in the dialog it needs to be rendered inside my theme wrapper which is inside the body in my setup.

Reproduction

https://stackblitz.com/edit/vaul-svelte-scaled-sj4vif?file=src%2Froutes%2F%2Bpage.svelte

Logs

No response

System Info

System:
    OS: macOS 14.1.2
    CPU: (8) arm64 Apple M1 Pro
    Memory: 89.36 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
  Browsers:
    Chrome: 120.0.6099.216
    Safari: 17.1.2
  npmPackages:
    @sveltejs/kit: ^2.0.3 => 2.0.3 
    svelte: ^4.2.8 => 4.2.8 
    typescript: ^5.3.3 => 5.3.3 
    vaul-svelte: ^0.0.7 => 0.0.7

Severity

annoyance

[huntabyte]

Thanks for raising this issue, I'll look into it as soon as I get the chance.

[huntabyte]

Hey there, you'd need to pass #main in this case as the portal prop to get your desired results. I was able to confirm it's working making that modification to your repro!

https://stackblitz.com/edit/vaul-svelte-scaled-d5zwtf?file=src%2Froutes%2F%2Bpage.svelte

[bergstromdev]

I don't think that's it. If you look at the portal in the screenshot it's still rendered on the body.

There also a console warning <Root> was created with unknown prop 'portal'

[huntabyte]

Oh I see now, you are correct. I'll look into this further!