Compatibility of Bits-ui with Custom Elements in Svelte 5 + Shadcn-Svelte + Tailwind

[ahelliet]

Hi there! 👋

I'm currently trying to build a Web Component (custom element) using Svelte 5 with the following stack:

• shadcn-svelte
• tailwindcss
• bits-ui

The idea is to expose part of my Svelte app as a standalone custom element that can be embedded in other projects.

Everything works great during development, but when I try to build the custom element, I run into compilation issues related to bits-ui.

`
vite v6.3.5 building for production...
✓ 140 modules transformed.
✗ Build failed in 539ms
error during build:
[commonjs--resolver] [plugin vite-plugin-svelte-module] node_modules/.pnpm/bits-ui@2.8.13_@internationalized+date@3.8.2_svelte@5.28.2/node_modules/bits-ui/dist/bits/pin-input/pin-input.svelte.js (2:12): node_modules/.pnpm/bits-ui@2.8.13_@internationalized+date@3.8.2_svelte@5.28.2/node_modules/bits-ui/dist/bits/pin-input/pin-input.svelte.js:2:12 The $ name is reserved, and cannot be used for variables and imports
https://svelte.dev/e/dollar_binding_invalid
file: node_modules/.pnpm/bits-ui@2.8.13_@internationalized+date@3.8.2_svelte@5.28.2/node_modules/bits-ui/dist/bits/pin-input/pin-input.svelte.js:2:12 (/node_modules/.pnpm/bits-ui@2.8.13_@internationalized+date@3.8.2_svelte@5.28.2/node_modules/bits-ui/dist/bits/pin-input/pin-input.svelte.js)

1 | /* pin-input.svelte.js generated by Svelte v5.28.2 */
2 | import * as $ from 'svelte/internal/client';
^
3 | import { Previous, watch } from "runed";
4 | import { onMount } from "svelte";

 ELIFECYCLE  Command failed with exit code 1.
`

My questions:
Is it possible to use bits-ui components within a custom element context in Svelte 5?

Are there recommended ways to ensure compatibility or workarounds I could try?

Let me know if I can provide a minimal repro repo. Thanks a lot in advance!

Cheers