v133 · dom

DOM State-Preserving Move

This features adds a DOM primitive (moveBefore) that allows moving elements around a DOM tree, without resetting the element's state. This function would be available on ParentNodes, like Element, Document, DocumentFragment.

concepts

  1. Element.moveBefore()

    Element.moveBefore() relocates a node WITHOUT reinitialising iframes, restarting animations, or losing focus. The reparent operation we've all needed.

  2. Iframe no-reload

    Move an <iframe> between two slots with appendChild vs moveBefore. The load counter and CSS animation iterations make the state preservation visible.

  3. Audio keepalive

    A playing <audio> reparented between mini-player and full-player slots. appendChild resets time; moveBefore keeps the pipeline alive.

  4. Focus & selection

    The drag-and-drop builder problem: relocate an editing card without dropping focus or losing the user's text selection. moveBefore preserves both.

  5. Animation continuity

    Three CSS animations — a spinning orb, a sweep bar, and a colour gradient — run on a card that you move between slots. moveBefore keeps every animation at its current timeline position; appendChild resets them all to iteration zero.

why it shipped

This features adds a DOM primitive (moveBefore) that allows moving elements around a DOM tree, without resetting the element's state. This function would be available on ParentNodes, like Element, Document, DocumentFragment.

references