diff --git a/.changeset/gentle-styles-hydrate.md b/.changeset/gentle-styles-hydrate.md new file mode 100644 index 0000000000..f63d4e274c --- /dev/null +++ b/.changeset/gentle-styles-hydrate.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: remove temporary raw-text hydration markers diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js index 6df020d2d7..84217c57e3 100644 --- a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js +++ b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js @@ -88,9 +88,11 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio assign_nodes(element, element); if (render_fn) { + var tmp_comment = null; + if (hydrating && is_raw_text_element(next_tag)) { - // prevent hydration glitches - element.append(document.createComment('')); + // prevent hydration glitches (code just below expects an anchor) + element.append((tmp_comment = document.createComment(''))); } // 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) // and the DOM will be silently discarded render_fn(element, child_anchor); - + tmp_comment?.remove(); set_animation_effect_override(null); } diff --git a/packages/svelte/tests/hydration/samples/script/_expected.html b/packages/svelte/tests/hydration/samples/script/_expected.html index b3a4d92219..3a19aa3b9b 100644 --- a/packages/svelte/tests/hydration/samples/script/_expected.html +++ b/packages/svelte/tests/hydration/samples/script/_expected.html @@ -1 +1 @@ - + diff --git a/packages/svelte/tests/hydration/samples/svelte-head-dynamic-style/_config.js b/packages/svelte/tests/hydration/samples/svelte-head-dynamic-style/_config.js new file mode 100644 index 0000000000..50e03336c6 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/svelte-head-dynamic-style/_config.js @@ -0,0 +1,7 @@ +import { test } from '../../test'; + +export default test({ + props: { + css: 'body { color: red; }' + } +}); diff --git a/packages/svelte/tests/hydration/samples/svelte-head-dynamic-style/main.svelte b/packages/svelte/tests/hydration/samples/svelte-head-dynamic-style/main.svelte new file mode 100644 index 0000000000..7eacce62c2 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/svelte-head-dynamic-style/main.svelte @@ -0,0 +1,9 @@ + + + + {css} + + +

content