Re: [whatwg/dom] Atomic move operation for element reparenting & reordering (Issue #1255)

This would be a fantastic addition of functionality for web development in general and for web libraries in particular.  Currently if developers want to preserve the state of a node when updating the DOM they need to be extremely careful not to remove that node from the DOM.

Morphing (https://github.com/patrick-steele-idem/morphdom) is an idea that has developed around addressing this.  I have created an extension to the original morphdom algorithm called idiomorph (https://github.com/bigskysoftware/idiomorph/) and the demo for idiomorph shows how it preserves a video in a situation when morphdom cannot.  37Signals has recently integrated idiomorph into Turbo 8 & Rails (https://radanskoric.com/articles/turbo-morphing-deep-dive-idiomorph?utm_source=reddit&utm_medium=forum&utm_campaign=turbo-morphing-deep-dive-idiomorph)

If you look at the details of the idiomorph demo you will see it's set up in a particular way: namely, the video cannot change the depth in the DOM at which it is placed, nor can any of the types of the parent nodes of the video change.  This is a severe restriction on what sorts of UI changes idiomorph can handle.  With the ability to reparent elements idiomorph could offer much better user experience, handling much more significant changes to the DOM without losing state such as video playback, input focus, etc.

Note that it's not only morphing algorithms like idiomorph that would benefit from this change: **nearly any library that mutates the DOM would benefit from this ability**.  Even virtual DOM based libraries, when the rubber meets the road, need to update the actual DOM and move actual elements around.  This change would benefit them tremendously.

Thank you for considering it!

-- 
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/1255#issuecomment-1951360890
You are receiving this because you are subscribed to this thread.

Message ID: <whatwg/dom/issues/1255/1951360890@github.com>