Not working on Svelte-5

[chmich]

For many years, i loved this package, but since Svelte-5

on this setup

import Component from 'svelte-tag';
import App from '../javascript/components/modal.svelte'
new Component({ component: App, tagname: 'modal-tag' })

i receive the error

Is Svelte-Tag not working anymore on Svelte-5?

How to render Svelte without Shadow-DOM? see my Stackoverflow-Post

Thanks,Chris

[crisward]

Good to hear you've found it useful.

svelte 5 changed the way a component is mounted, so this would need updating. I'd quite like to keep the compatible with svelte < 5, so I'll need to do a quick check. Not sure if they've changed the way you pass props.

Change detailed here

https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes

line in svelte-tag that needs changing here

https://github.com/crisward/svelte-tag/blob/master/index.js#L76

Not sure if any other changes are needed. We use $$slots too, which looks like they're on the deprecated list. As web components don't have 'snippets' we'll just have to hope they keep slots around for interpolation.

https://svelte.dev/docs/svelte/legacy-$$slots

I'll update this when I get chance, isn't a big change.

[crisward]

Looks like I'll have to find a workaround for using svelte/internal too. 😬

[patricknelson]

Keeping an eye on this. If you happen to get to it before me, I'll also backport it into my fork as well. Of course, if the inverse is true, I'll ping this thread.

[crisward]

See the svelte5 branch.

The tests are passing but I've no idea if this is working as expected. I've had to jump on some private api's again, but if it works.

@patricknelson if you find another solution let me know.

[chmich]

Many thanks @crisward, i tested it and it looks that it is working like expected with svelte5.

[crisward]

I'll update the readme and push a version 5 to npm at some point (possibly today).

Because of the level of the changes the 5 version won't work with <=4 so I'll need to document that somewhere.

[crisward]

This new version has now been published.

https://www.npmjs.com/package/svelte-tag

npm install svelte-tag@5

[patricknelson]

Not merged into master, yet but here are the apparent changes for reference (assuming fully pushed): master...svelte5

[patricknelson]

Thanks for the effort, @crisward! I’m hoping all my downstream changes are just as simple (particularly nesting and context support), since they did have to reach into the internals a little bit. 🤞

p.s. Looks like slot support got slightly less complicated (and less magical) on our end thanks to the new “snippet” syntax. Looks like you can probably remove this line as well which copied that special createSlotFn:

https://github.com/sveltejs/svelte/issues/2588

@crisward I see you were still referencing .$$slots; have you tried rendering a component running in runes mode and not legacy mode? If so, does it still work?

[chmich]

Many thanks, @patricknelson and @crisward!

Slots and Custom Elements on Svelte, without shadow-dom: I added a comment to the discussion with rich harris

[crisward]

@crisward I see you were still referencing .$$slots; have you tried rendering a component running in runes mode and not legacy mode? If so, does it still work?

No I haven't checked, but I got the code from how svelte creates slots in the playground and those look very similar with and without runes enabled, so I suspect they'll work fine.

[chmich]

Now i played around slots, based on this «comprehensive» logrocket tutorial:

On the first step, on Rails, i built a vite-app, on the svelte default way. Svelte there is built with:

import { mount } from 'svelte'
import App from '../javascript/slots/App.svelte'
const app = mount(App, {
    target: document.getElementById('app'),
})

As you know, Svelte is not building a shadow dome along the way! And I found: Slots are working on all features described on above mentioned «Comprehensive Tutorial».

As a second step, I built the same components with svelte-tag@5 (on the same app, but with a different name!).

import SvelteTag from "svelte-tag";
new SvelteTag({ component: App, tagname: "svelte-tag-app"})

And added it to the view by <svelte-tag-app/>

I found all features from slots working on the same way like on «first-step»:

{#if $$slots.footer} .... => worked
<svelte:fragment slot="footer"> => worked
named slots => worked

And i tested that all on the browsers Safari, Chrome, Brave, Opera, FireFox, MS Edge.

Like said, i am not experienced in slots, i just became courious because of all theese discussions and want a reliable way for integrating svelte on Rails. And I am completely satisfied with Svelte-Tag!