From 803f59b171e1f962c0b0acb20dba2074bc9d2e84 Mon Sep 17 00:00:00 2001 From: Kunpeng Xie <68572236+pentaoa@users.noreply.github.com> Date: Tue, 22 Sep 2026 22:09:26 +0800 Subject: [PATCH] fix: avoid reinserting dynamic elements during hydration (#18855) Hydrating a `` currently removes and reinserts the DOM node that was already claimed from the server-rendered HTML. This can restart CSS animations and disconnect/reconnect custom elements inside it. Keep claimed elements in place while preserving insertion for client-created elements and later tag changes. Capture the hydration state before rendering children, since empty or void elements can temporarily turn hydration off. Fixes #18852. ### Before submitting the PR, please make sure you do the following - [x] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs - [x] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`. - [x] This message body should clearly illustrate what problems it solves. - [x] Ideally, include a test that fails without this PR but passes with it. - [x] If this PR changes code within `packages/svelte/src`, add a changeset (`npx changeset`). ### Tests and linting - [x] Run the tests with `pnpm test` and lint the project with `pnpm lint` Validation: - The real Chromium regression fails on unchanged `636eaaaa`: hydration removes all four server-rendered dynamic elements. Client mounting and server rendering pass. - The regression checks node removals and custom-element connection callbacks for ordinary, empty, void, and custom dynamic elements, then changes the tags and removes/recreates an element. - A hydration mismatch regression verifies that different client/server child branches recover while retaining the outer element and its following sibling. - `pnpm test hydration runtime-browser`: 219 passed. - Full `CI=true pnpm test`: 34 test files passed, 7,790 tests passed, 55 existing skips. The real-browser suite ran with Chromium. - `pnpm check`: passed, including build, generated type checks, and treeshakeability checks. - `pnpm lint`: passed. AI assistance: This change and its tests were prepared with OpenAI Codex. The PR description is also AI-assisted. --------- Co-authored-by: paoloricciuti --- .changeset/tidy-trees-stay.md | 5 ++ .../client/dom/blocks/svelte-element.js | 4 +- .../dynamic-element-child-mismatch/_config.js | 10 +++ .../_expected.html | 2 + .../main.svelte | 9 +++ .../svelte/tests/runtime-browser/assert.js | 1 + .../_config.js | 71 +++++++++++++++++++ .../main.svelte | 11 +++ 8 files changed, 112 insertions(+), 1 deletion(-) create mode 100644 .changeset/tidy-trees-stay.md create mode 100644 packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_config.js create mode 100644 packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_expected.html create mode 100644 packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/main.svelte create mode 100644 packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/_config.js create mode 100644 packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/main.svelte diff --git a/.changeset/tidy-trees-stay.md b/.changeset/tidy-trees-stay.md new file mode 100644 index 0000000000..65bf7de619 --- /dev/null +++ b/.changeset/tidy-trees-stay.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: preserve dynamic element connections during hydration 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 84217c57e3..adca73b181 100644 --- a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js +++ b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js @@ -71,6 +71,7 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio branches.ensure(next_tag, (anchor) => { if (next_tag) { + var is_hydrating = hydrating; element = hydrating ? /** @type {Element} */ (element) : create_element(next_tag, ns); if (DEV && location) { @@ -123,7 +124,8 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio // we do this after calling `render_fn` so that child effects don't override `nodes.end` /** @type {Effect & { nodes: EffectNodes }} */ (active_effect).nodes.end = element; - anchor.before(element); + // we only move the node if we are not hydrating since a claimed element is already in place + if (!is_hydrating) anchor.before(element); } if (hydrating) { diff --git a/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_config.js b/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_config.js new file mode 100644 index 0000000000..cdd8f4484b --- /dev/null +++ b/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_config.js @@ -0,0 +1,10 @@ +import { test } from '../../test'; + +export default test({ + server_props: { condition: false }, + props: { condition: true }, + + snapshot(target) { + return { element: target.querySelector('div'), sibling: target.querySelector(':scope > p') }; + } +}); diff --git a/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_expected.html b/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_expected.html new file mode 100644 index 0000000000..5f68a45e48 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_expected.html @@ -0,0 +1,2 @@ +

client

+

after

diff --git a/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/main.svelte b/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/main.svelte new file mode 100644 index 0000000000..839a06981f --- /dev/null +++ b/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/main.svelte @@ -0,0 +1,9 @@ + + + + {#if condition}

client

{:else}server{/if} + +

after

diff --git a/packages/svelte/tests/runtime-browser/assert.js b/packages/svelte/tests/runtime-browser/assert.js index 249c5ad33d..9fdb917048 100644 --- a/packages/svelte/tests/runtime-browser/assert.js +++ b/packages/svelte/tests/runtime-browser/assert.js @@ -128,6 +128,7 @@ function normalize_children(node) { * id_prefix?: string; * props?: Props; * compileOptions?: Partial; + * before_test?: () => void; * test?: (args: { * assert: typeof assert & { * htmlEqual(a: string, b: string, description?: string): void; diff --git a/packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/_config.js b/packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/_config.js new file mode 100644 index 0000000000..beabb5b1fa --- /dev/null +++ b/packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/_config.js @@ -0,0 +1,71 @@ +import { flushSync } from 'svelte'; +import { assert_ok, test } from '../../assert'; + +/** @type {Record} */ +const connections = {}; +/** @type {string[]} */ +const disconnections = []; +/** @type {Element[]} */ +let claimed; +/** @type {MutationObserver} */ +let observer; + +export default test({ + before_test() { + const target = document.querySelector('main'); + assert_ok(target); + claimed = Array.from(target.children); + customElements.define( + 'connection-probe', + class extends HTMLElement { + connectedCallback() { + connections[this.id] = (connections[this.id] || 0) + 1; + } + disconnectedCallback() { + disconnections.push(this.id); + } + } + ); + observer = new MutationObserver(() => {}); + observer.observe(target, { childList: true }); + }, + + test({ assert, component, target }) { + const removed = observer.takeRecords().flatMap((record) => Array.from(record.removedNodes)); + observer.disconnect(); + assert.deepEqual( + removed + .filter((node) => node instanceof Element) + .filter((node) => claimed.includes(node)) + .map((node) => node.id), + [] + ); + assert.deepEqual(connections, { child: 1, custom: 1 }); + assert.deepEqual(disconnections, []); + + flushSync(() => { + component.tag = 'section'; + component.empty_tag = 'span'; + component.void_tag = 'hr'; + component.custom_tag = 'aside'; + }); + assert.equal(target.querySelector('#parent')?.tagName, 'SECTION'); + assert.equal(target.querySelector('#empty')?.tagName, 'SPAN'); + assert.equal(target.querySelector('#void')?.tagName, 'HR'); + assert.equal(target.querySelector('#custom')?.tagName, 'ASIDE'); + assert.deepEqual(connections, { child: 2, custom: 1 }); + assert.deepEqual(disconnections, ['child', 'custom']); + + flushSync(() => { + component.tag = null; + }); + assert.equal(target.querySelector('#parent'), null); + assert.deepEqual(disconnections, ['child', 'custom', 'child']); + + flushSync(() => { + component.tag = 'div'; + }); + assert.equal(target.querySelector('#parent')?.tagName, 'DIV'); + assert.deepEqual(connections, { child: 3, custom: 1 }); + } +}); diff --git a/packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/main.svelte b/packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/main.svelte new file mode 100644 index 0000000000..44e902188c --- /dev/null +++ b/packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/main.svelte @@ -0,0 +1,11 @@ + + + + + +