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

from an htmx perspective, we have an attribute, `hx-preserve` that preserves an element in the DOM:

https://htmx.org/attributes/hx-preserve/

It does this by looking for "preserved" elements in the new content (fragment) and finding the "old" version in the existing DOM by id:

https://github.com/bigskysoftware/htmx/blob/c247cae9bf04b5b274d3bd65937541e8224a359c/src/htmx.js#L887

```js
        function handlePreservedElements(fragment) {
            forEach(findAll(fragment, '[hx-preserve], [data-hx-preserve]'), function (preservedElt) {
                var id = getAttributeValue(preservedElt, "id");
                var oldElt = getDocument().getElementById(id);
                if (oldElt != null) {
                    preservedElt.parentNode.replaceChild(oldElt, preservedElt);
                }
            });
        }
```

With a new state preserving API we'd update this to something like:

```js
        function handlePreservedElements(fragment) {
            forEach(findAll(fragment, '[hx-preserve], [data-hx-preserve]'), function (preservedElt) {
                var id = getAttributeValue(preservedElt, "id");
                var oldElt = getDocument().getElementById(id);
                if (oldElt != null) {
                    preservedElt.parentNode.replaceChildSPAM(oldElt, preservedElt);
                }
            });
        }
 ```

And then all people would need to do to keep, for example, that video playing between pages would be to mark the element as `hx-preserved`, regardless of what the new content looks like.  

(Apologies for the `forEach()` and `findAll()` methods, they do what you think they do, htmx 1.x is IE compatible so we had to roll our own versions of some stuff.)

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

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