Skip to content

fix: avoid reinserting dynamic elements during hydration - #18855

Merged
paoloricciuti merged 2 commits into
sveltejs:mainfrom
pentaoa:fix/dynamic-element-hydration
Sep 22, 2026
Merged

fix: avoid reinserting dynamic elements during hydration#18855
paoloricciuti merged 2 commits into
sveltejs:mainfrom
pentaoa:fix/dynamic-element-hydration

Conversation

@pentaoa

@pentaoa pentaoa commented Sep 22, 2026

Copy link
Copy Markdown
Contributor

Hydrating a <svelte:element> 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

  • 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
  • Prefix your PR title with feat:, fix:, chore:, or docs:.
  • This message body should clearly illustrate what problems it solves.
  • Ideally, include a test that fails without this PR but passes with it.
  • If this PR changes code within packages/svelte/src, add a changeset (npx changeset).

Tests and linting

  • 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.

@pentaoa
fix: avoid reinserting dynamic elements during hydration
e721a47 
Keep claimed elements connected while preserving client insertion and later tag changes.

Fixes sveltejs#18852

Implementation and tests prepared with OpenAI Codex.
@pkg-svelte-dev

pkg-svelte-dev Bot commented Sep 22, 2026 •
edited
Loading

Copy link
Copy Markdown

Install the latest version of svelte from b6d8110:

pnpm add https://pkg.svelte.dev/svelte/c/b6d8110600e73d3679ae7edc196ceb26016c5432

Open in pkg.svelte.dev: https://pkg.svelte.dev/repos/svelte/pr/18855

Note

This PR is from a fork. A maintainer must approve approve each commit before it can be built and installed.

@changeset-bot

changeset-bot Bot commented Sep 22, 2026 •
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: b6d8110

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
svelte Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@paoloricciuti

paoloricciuti commented Sep 22, 2026

Copy link
Copy Markdown
Member

Looks good, I just pushed a change for the comment to make it more clear. Thanks for contributing!

@paoloricciuti
paoloricciuti merged commit 803f59b into sveltejs:main Sep 22, 2026
12 of 13 checks passed
@github-actions github-actions Bot mentioned this pull request Sep 22, 2026
Merged
@xyrolle xyrolle mentioned this pull request Sep 23, 2026
Merged
6 tasks done
dummdidumm pushed a commit that referenced this pull request Oct 6, 2026
@github-actions
Version Packages (#18858)
10fdca7 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## svelte@5.57.2

### Patch Changes

- fix: don't create async deriveds for a component destroyed while
waiting for its top-level `await`
([#18931](#18931))

- fix: prevent untracked derived reads from retaining disconnected
dependencies ([#18829](#18829))

- fix: error if `{:else}` is followed by another `{:else}` or `{:else if
...}` ([#18900](#18900))

- fix: avoid tracking SvelteURLSearchParams during URL updates
([#18791](#18791))

- fix: restore hydration state when custom element attribute updates
throw ([#18467](#18467))

- fix: attach event handlers that are assigned after a top-level `await`
in production ([#18933](#18933))

- fix: flush anything pending before invoking flushSync callback
function ([#18878](#18878))

- fix: preserve location information for `await` wrappers
([#18859](#18859))

- fix: keep a reactive assignment with no dependencies when `migrate`
cannot turn it into a declaration
([#18817](#18817))

- fix: don't hang `migrate` on a declaration that shares a line with its
script tag ([#18816](#18816))

- fix: prevent duplicate subscriptions when reconnecting deriveds
([#18899](#18899))

- fix: recover when an unexpected node replaces a nested boundary
comment during hydration
([#18925](#18925))

- fix: print `{#await}` blocks that only have a pending branch
([#18908](#18908))

- fix: don't warn about a redundant `link` role on `<area>` elements
without an `href`
([#18872](#18872))

- fix: don't throw `state_unsafe_mutation` when the focused element is
removed while `bind:activeElement` is used
([#18921](#18921))

- fix: don't overwrite an unchanged spread `value`, preserving
incomplete number input
([#18864](#18864))

- fix: read batch-local array on each-block commit
([#18879](#18879))

- fix: error at compile time when a declaration in a snippet redeclares
one of its parameters
([#18842](#18842))

- fix: error when using `let:` directives on a component with a
`children` snippet
([#18873](#18873))

- fix: ignore stale boundary reset callbacks
([#18886](#18886))

- fix: handle deferred transitions aborted before initialization
([#18776](#18776))

- fix: prevent hydration mismatch recovery from being intercepted by
error boundaries
([#18841](#18841))

- fix: preserve dynamic element connections during hydration
([#18855](#18855))

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
@github-actions github-actions Bot mentioned this pull request Oct 7, 2026
Closed
dadezzz pushed a commit to dadezzz/events-cash-register that referenced this pull request Oct 10, 2026
Renovate [bot] Forgejo
fix(deps): update dependency svelte to v5.57.2 (#332)
e83b14f 
This PR contains the following updates:

| Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) |
|---|---|---|---|
| [svelte](https://svelte.dev) ([source](https://github.com/sveltejs/svelte/tree/HEAD/packages/svelte)) | [`5.57.1` → `5.57.2`](https://renovatebot.com/diffs/npm/svelte/5.57.1/5.57.2) | ![age](https://developer.mend.io/api/mc/badges/age/npm/svelte/5.57.2?slim=true) | ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/svelte/5.57.1/5.57.2?slim=true) |

---

### Release Notes

<details>
<summary>sveltejs/svelte (svelte)</summary>

### [`v5.57.2`](https://github.com/sveltejs/svelte/blob/HEAD/packages/svelte/CHANGELOG.md#5572)

[Compare Source](https://github.com/sveltejs/svelte/compare/svelte@5.57.1...svelte@5.57.2)

##### Patch Changes

- fix: don't create async deriveds for a component destroyed while waiting for its top-level `await` ([#&#8203;18931](sveltejs/svelte#18931))

- fix: prevent untracked derived reads from retaining disconnected dependencies ([#&#8203;18829](sveltejs/svelte#18829))

- fix: error if `{:else}` is followed by another `{:else}` or `{:else if ...}` ([#&#8203;18900](sveltejs/svelte#18900))

- fix: avoid tracking SvelteURLSearchParams during URL updates ([#&#8203;18791](sveltejs/svelte#18791))

- fix: restore hydration state when custom element attribute updates throw ([#&#8203;18467](sveltejs/svelte#18467))

- fix: attach event handlers that are assigned after a top-level `await` in production ([#&#8203;18933](sveltejs/svelte#18933))

- fix: flush anything pending before invoking flushSync callback function ([#&#8203;18878](sveltejs/svelte#18878))

- fix: preserve location information for `await` wrappers ([#&#8203;18859](sveltejs/svelte#18859))

- fix: keep a reactive assignment with no dependencies when `migrate` cannot turn it into a declaration ([#&#8203;18817](sveltejs/svelte#18817))

- fix: don't hang `migrate` on a declaration that shares a line with its script tag ([#&#8203;18816](sveltejs/svelte#18816))

- fix: prevent duplicate subscriptions when reconnecting deriveds ([#&#8203;18899](sveltejs/svelte#18899))

- fix: recover when an unexpected node replaces a nested boundary comment during hydration ([#&#8203;18925](sveltejs/svelte#18925))

- fix: print `{#await}` blocks that only have a pending branch ([#&#8203;18908](sveltejs/svelte#18908))

- fix: don't warn about a redundant `link` role on `<area>` elements without an `href` ([#&#8203;18872](sveltejs/svelte#18872))

- fix: don't throw `state_unsafe_mutation` when the focused element is removed while `bind:activeElement` is used ([#&#8203;18921](sveltejs/svelte#18921))

- fix: don't overwrite an unchanged spread `value`, preserving incomplete number input ([#&#8203;18864](sveltejs/svelte#18864))

- fix: read batch-local array on each-block commit ([#&#8203;18879](sveltejs/svelte#18879))

- fix: error at compile time when a declaration in a snippet redeclares one of its parameters ([#&#8203;18842](sveltejs/svelte#18842))

- fix: error when using `let:` directives on a component with a `children` snippet ([#&#8203;18873](sveltejs/svelte#18873))

- fix: ignore stale boundary reset callbacks ([#&#8203;18886](sveltejs/svelte#18886))

- fix: handle deferred transitions aborted before initialization ([#&#8203;18776](sveltejs/svelte#18776))

- fix: prevent hydration mismatch recovery from being intercepted by error boundaries ([#&#8203;18841](sveltejs/svelte#18841))

- fix: preserve dynamic element connections during hydration ([#&#8203;18855](sveltejs/svelte#18855))

</details>

---

### Configuration

📅 **Schedule**: (UTC)

- Branch creation
  - At any time (no schedule defined)
- Automerge
  - At any time (no schedule defined)

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Mend Renovate CLI](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0NC4xNDguNCIsInVwZGF0ZWRJblZlciI6IjQ0LjE0OC40IiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6W119-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@paoloricciuti paoloricciuti paoloricciuti approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

<svelte:element> is removed and re-inserted during hydration, restarting CSS animations (and anything else that reacts to DOM removal)

2 participants

@pentaoa @paoloricciuti