Mastodawn

Bramus Jan 16, 2025

New in Chrome 133 – which goes stable on Feb 4 – is a new method to move an element around the DOM.

Unlike the classic way of removing+reinserting a node, this moveBefore method preserves the element’s state!

Iframes remain loaded, animations don’t restart, …

DEMO: https://codepen.io/bramus/full/xbKzPJB

(Add View Transitions for an even smoother move!)

DOM State-Preserving Move (Node.prototype.moveBefore)

...

Show thread

Massimo Artizzu 🇺🇦🔱Jan 24, 2025

@bramus As an author of #webcomponents, how can I tell if a custom element has been moved around using `.moveBefore` rather than `.insertBefore`? Granted that they both:
- cause `.disconnected`/`.connectedCallback` to be called;
- generate two `MutationRecord`s: one for the removal of the node, the other for the addition.
Is that specifically conceived for some "special" native elements?

Show thread

Bramus Jan 24, 2025

@MaxArt2501 You get a connectedMoveCallback.

If you didn't provide one, you get a disconnectedCallback and connectedCallbackfor backwards-compat, and the element's isConnected would be true during this time.

Show thread

Bramus Jan 24, 2025

@MaxArt2501 (Answer kindly provided to me by @nomster who was one of the engineers driving this)

Show thread

Noam Rosenthal

@bramus @MaxArt2501 yea, we'll have more proper documentation for this as we go along with the releases. But the main idea is that for backward compat, existing components will receive the same callbacks as before, as if they were disconnected+connected, and they can override this behavior and do something special using connectedMoveCallback.