{@html} broken after hydration since Svelte 4.0.2

[wackbyte]

What version of astro are you using?

2.7.3

Are you using an SSR adapter? If so, which one?

Node

What package manager are you using?

pnpm

What operating system are you using?

Linux (NixOS)

What browser are you using?

Firefox (Librewolf)

Describe the Bug

Since Svelte 4.0.2, the {@html} tag seems to be broken after being hydrated from props. On page load, it appears for a moment, but quickly disappears after hydration.

I think that this may originate from sveltejs/svelte#8880.

What's the expected result?

The {@html} tag should not disappear after being hydrated from props. This is its behavior in Svelte 4.0.1 and earlier.

Link to Minimal Reproducible Example

https://gitlab.com/wackbyte/svelte-html-hydration-broken

Participation

• I am willing to submit a pull request for this issue.

[bluwy]

This should be reported to Svelte. Looks like an unintended breaking change.

I tried debugging this but I can't quite figure out why it's happening. I noticed the <p> element that contains the @html is being detached here: https://github.com/sveltejs/svelte/blob/800f6c076be5dd87dd4d2e9d66c59b973d54d84b/packages/svelte/src/runtime/internal/Component.js#L145

A difference in your repro with a non-wrapper and wrapper islands, is that we're creating the Svelte component with hydratable: true directly vs letting Svelte create that nested Svelte component. We're creating the Svelte component like so:

astro/packages/integrations/svelte/client.js

Lines 11 to 20 in 7419bb6

	new Component({
	target,
	props: {
	...props,
	$$slots: slots,
	$$scope: { ctx: [] },
	},
	hydrate: client !== 'only',
	$$inline: true,
	});

Closing for now as it's not something that can be fixed in Astro.

[dummdidumm]

The problem is that the resulting HTML is invalid. In the reproduction, the result is <p><p>testing</p></p>. Nested p tags are invalid HTML so the browser shuffles things around in a weird way and then Svelte's hydration mechanism has no chance to pick up things correctly. If you ensure the HTML is valid (surrounding the {@html content} with a div for example) then the error should go away.

[wackbyte]

Ah, you're right, it seems to always happen with nested p tags. I'll go open an issue in the Svelte repo.

[wackbyte]

I was just setting up a repo to reproduce it in SvelteKit but it looks like it already got fixed :P