<svelte:element> hydration is broken in with SvelteKit

[bleucitron]

Describe the bug

I'm not sure if this should be in Svelte or Kit repo, but since it appeared with Svelte 5, i'm posting it here.

<svelte:element> is not properly hydrated when using SSR with SvelteKit.

With the following code, the page should render a button once hydrated:

• it does with Svelte 4
• it does not with Svelte 5

<script>
	import { browser } from '$app/environment';
	$: t = browser ? 'button' : 'div';
	$: console.log('T', t);
</script>

<svelte:element this={t}>{t}</svelte:element>

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-qcekrk?file=package.json,src%2Froutes%2F%2Bpage.svelte

Logs

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (2) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    svelte: ^5.1.15 => 5.1.15

Severity

blocking an upgrade

[Conduitry]

I believe this is expected, but we should be clearer in the migration guide. Hydration in v5 won't change completely change the markup that it gets from the server - for example, changing one element into another. To achieve this sort of thing, you should still have the element be a <div> on the browser during hydration, and then switch it to a <button> afterwards.

[bleucitron]

you should still have the element be a div on the browser during hydration, and then switch it to a button afterwards

You mean with something like onMount ?

[Conduitry]

With onMount or with an $effect, yeah.

[dummdidumm]

Related: #13517

[bleucitron]

This does not seem to work :

<script>
        import {onMount} from 'svelte'
	import { browser } from '$app/environment';
	$: t = (browser ? 'button' : 'div');
	$: console.log(t);

	onMount(()=> {
		t = 'button'
	})

</script>

<svelte:element this={t}>{t}</svelte:element>

[Conduitry]

t should be unconditionally set to div initially, regardless of server vs browser, and only changed on mount.

[bleucitron]

Ok it works indeed as you said.

My actual use case is a little more complicated, since we are relying on a localStorage-based store to define which element to actually use.

We could indeed use onMount + eventHandlers/effects to workaround this issue and still be able to adapt the displayed element, but this seems counterintuitive and rather complex compared to the sole use of the store value.

It's probably not so much an issue with Svelte 5 syntax (using $effect instead of onMount + $:{ }), but for us users that are just bumping the version until actually migrating, this is a bit annoying.

[bleucitron]

The only thing i found to make this work with Svelte 4 syntax is the following:

<script>
	import { storeFromLocalStorage } from '$lib';
	import { browser } from '$app/environment';
	import { onMount, tick } from 'svelte';

	let t = 'div';

	storeFromLocalStorage.subscribe(async value => {
		if (browser) {
			await tick();
			t = value ? 'button' : 'div';
		}
	});
</script>

<svelte:element this={t}>{t}</svelte:element>