Properly switch HTML attributes of root node when updating via AJAX

Author: jissereitsma

view/base/templates/script/ajax-queue.phtml

@@ -161,7 +161,7 @@ if ($interval < 10) {
                 }
 
                 Alpine.mutateDom(() => {
-                    LokiHtmlReplacer.replace(targetElement, newTargetElement.innerHTML);
+                    LokiHtmlReplacer.replace(targetElement, newTargetElement);
                     Alpine.destroyTree(targetElement);
                     Alpine.initTree(targetElement);
                 });

view/base/templates/script/html-updater.phtml

@@ -1,10 +1,19 @@
 <script>
     const LokiHtmlReplacer = {
-        replace(root, incomingHTML) {
+        replace(root, newRoot) {
             if (root.hasAttribute('x-ignore')) {
                 return;
             }
 
+            root.getAttributeNames().forEach(attributeName => {
+                root.removeAttribute(attributeName);
+            });
+
+            newRoot.getAttributeNames().forEach(attributeName => {
+                root.setAttribute(attributeName, newRoot.getAttribute(attributeName));
+            });
+
+            const incomingHTML = newRoot.innerHTML;
             const incomingFrag = this.parseHTML(incomingHTML);
             const existingSkips = root.querySelectorAll('[x-ignore]');