Render reconciliation

Re-renders of an html template patch the existing DOM in place instead of rebuilding it, so transient DOM state on the rendered nodes survives. Each section below demonstrates one part of that.

1. Focus, caret and uncommitted value survive

A controlled field: every keystroke writes back to a prop and re-renders the component, yet the <input> is the same element throughout.

2. Attribute-only changes patch in place

Selecting a tab changes only aria-selected and class. Reach a tab with the keyboard, press Enter, and focus stays on it — no node was replaced.

3. Running CSS transitions are not restarted

The box animates for 2s while the component re-renders ten times. Its vnode is unchanged, so the element is left untouched and the transition runs to completion.

4. Removed props and attributes are undone

Props that disappear from the new tree are actively reset on the reused element — a dropped disabled, data-* attribute and inline style rules all go away.

5. Lists — and the non-keyed limitation

Appending and removing reuses the surviving rows. Reordering, however, is matched by position: the rendered result is correct, but preserved state stays with the slot rather than following the item.