Could <Teleport> leverage the new moveBefore() API to preserve state?

[Youhan]

Hi team,

I recently came across the new moveBefore() API, which allows moving DOM nodes without resetting their internal state (e.g., videos keep playing, iframes don't reload).

Reference: https://developer.chrome.com/blog/movebefore-api

Currently, <Teleport> seems to rely on remove/insert, which causes media to reset when the target changes.

I was wondering if it might be feasible for Vue to progressively enhance runtime-dom to use moveBefore when available? This would make features like "Picture-in-Picture" (moving a video player to a different container) seamless without needing manual DOM manipulation.

Is this something that would fit into the current renderer architecture?

Thanks!

[ismaildasci]

Great suggestion! This would definitely be a nice enhancement for Teleport.

You're right that Teleport currently uses the classic remove/insert pattern which resets element state. The moveBefore() API would be a perfect fit here since it does exactly what Teleport needs - atomic moves that preserve things like video playback, iframe state, CSS animations, focus, etc.

Implementation-wise, it should be pretty straightforward:

1. Feature-detect moveBefore() at runtime (it's in Chrome 133+, Firefox and Safari have shown positive signals)
2. Use it in runtime-dom when moving Teleport content between targets
3. Fall back to the current insert/remove approach for older browsers

The renderer architecture already abstracts DOM operations, so this could be added as a progressive enhancement without breaking anything.

One thing to note: moveBefore() only works within the same document, so cross-document scenarios would still need the current approach. But for typical use cases (moving a video player to a PiP container, etc.), this would work great.

Would be cool to see this land - it's one of those small changes that would make a real difference for media-heavy apps.

[Youhan]

Thanks chat gpt!

[edison1105]

see #14345

[Youhan]

Awesome!