Identity is preserved

For keeps the DOM for a row while that row remains in the list. Reordering moves its existing elements instead of creating another copy. An input's value stays with its row, even when its position changes.

import { useStore } from "@shadow-js/core";
import { For } from "@shadow-js/web";

export function Rows() {
  const [items, setItems] = useStore(["a", "b", "c"]);
  return (
    <section>
      <button onClick={() => setItems([...items].reverse())}>Reverse</button>
      <For each={items}>
        {(item) => (
          <label>
            {item}
            <input aria-label={`Note for ${item}`} />
          </label>
        )}
      </For>
    </section>
  );
}

Type a note beside b, then choose Reverse. The labels change from a, b, c to c, b, a; the note stays beside b. With moveBefore, the browser also preserves focus and embedded document state during a move. The insertBefore fallback preserves node identity, but the browser may reset those states.