fix: remove raw-text hydration markers (#18269)

Fixes #14413.

This keeps the temporary raw-text hydration sentinel used by dynamic
`<svelte:element>` from becoming part of the final DOM. Hydration still
gets a marker to advance through for raw-text children, but the marker
is removed after the child renderer runs, so `<style>` and `<script>`
contents stay identical to SSR output.

Tests:
- `pnpm test hydration -t svelte-head-dynamic-style`
- `pnpm test hydration`
- `pnpm test runtime-runes -t svelte-element`
- `pnpm lint`
- `git diff --check`

---------

Co-authored-by: Puneet Dixit <236133619+puneetdixit200@users.noreply.github.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
pull/18271/head
Puneet Dixit 3 months ago committed by GitHub
parent 04d408b29d
commit 8b961be0b1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: remove temporary raw-text hydration markers

@ -88,9 +88,11 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
assign_nodes(element, element); assign_nodes(element, element);
if (render_fn) { if (render_fn) {
var tmp_comment = null;
if (hydrating && is_raw_text_element(next_tag)) { if (hydrating && is_raw_text_element(next_tag)) {
// prevent hydration glitches // prevent hydration glitches (code just below expects an anchor)
element.append(document.createComment('')); element.append((tmp_comment = document.createComment('')));
} }
// If hydrating, use the existing ssr comment as the anchor so that the // If hydrating, use the existing ssr comment as the anchor so that the
@ -114,7 +116,7 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
// contains children, it's a user error (which is warned on elsewhere) // contains children, it's a user error (which is warned on elsewhere)
// and the DOM will be silently discarded // and the DOM will be silently discarded
render_fn(element, child_anchor); render_fn(element, child_anchor);
tmp_comment?.remove();
set_animation_effect_override(null); set_animation_effect_override(null);
} }

@ -1 +1 @@
<!--[--><!----><script>{}<!----></script><!----><!--]--> <!--[--><!----><script>{}</script><!----><!--]-->

@ -0,0 +1,7 @@
import { test } from '../../test';
export default test({
props: {
css: 'body { color: red; }'
}
});

@ -0,0 +1,9 @@
<script>
let { css } = $props();
</script>
<svelte:head>
<svelte:element this="style" type="text/css">{css}</svelte:element>
</svelte:head>
<p>content</p>
Loading…
Cancel
Save