demo · v133

Iframe reparent without reload

The classic showstopper for SPA reordering: move an <iframe> across the DOM and it reloads. The same goes for video state, focus, and CSS animations. moveBefore() doesn't tear the node down — the iframe keeps its document, the video keeps playing, the input keeps focus.

slot A

slot B

iframe load events
0
CSS animation iterations elapsed
0

what's happening

The iframe loads a counter page that posts its load count back. Every time the node is recreated (which appendChild does, since it detaches and re-attaches the iframe to a new parent), the document reinitialises and the counter resets. moveBefore() is a new ParentNode primitive that performs a state-preserving move — the live document continues, focused inputs stay focused, CSS animations don't restart, and disconnected/connected callbacks don't fire on custom elements.

// Old:
slotB.appendChild(iframe);
// → iframe document reloads, animations restart, focus lost

// New:
slotB.moveBefore(iframe, null);
// → none of the above

see also