Detach adopted attributes from their elements

.changeset/adopt-attached-attributes.md

@@ -0,0 +1,5 @@
+---
+'@remote-dom/polyfill': patch
+---
+
+Detach attributes from their owner element when passed to `Document.adoptNode()`, including same-document adoption.

packages/polyfill/source/Document.ts

@@ -3,6 +3,7 @@ import {
   NAME,
   PREFIX,
   NODE_TYPE_DOCUMENT,
+  NODE_TYPE_ATTRIBUTE,
   HTML_NAMESPACE,
   SVG_NAMESPACE,
   type NamespaceURI,
@@ -19,6 +20,7 @@ import {
 } from './names.ts';
 import type {Window} from './Window.ts';
 import type {Node} from './Node.ts';
+import type {Attr} from './Attr.ts';
 import {Event} from './Event.ts';
 import {ParentNode, removeChildForAdoption} from './ParentNode.ts';
 import {Element} from './Element.ts';
@@ -40,6 +42,7 @@ import {HTMLBodyElement} from './HTMLBodyElement.ts';
 import {HTMLHeadElement} from './HTMLHeadElement.ts';
 import {HTMLHtmlElement} from './HTMLHtmlElement.ts';
 import {performWithCustomElementReactions} from './custom-element-reactions.ts';
+import {removeAttributeForAdoption} from './NamedNodeMap.ts';
 
 export class Document extends ParentNode {
   nodeType: NodeType = NODE_TYPE_DOCUMENT;
@@ -140,6 +143,22 @@ export class Document extends ParentNode {
   }
 
   adoptNode(node: Node) {
+    if (node.nodeType === NODE_TYPE_ATTRIBUTE) {
+      const attribute = node as Attr;
+      const ownerElement = attribute.ownerElement;
+
+      if (ownerElement) {
+        return performWithCustomElementReactions(() => {
+          removeAttributeForAdoption(ownerElement.attributes, attribute, this);
+          return attribute;
+        });
+      }
+
+      if (attribute[OWNER_DOCUMENT] === this) return attribute;
+      adoptNodes([attribute], this);
+      return attribute;
+    }
+
     if (node[OWNER_DOCUMENT] === this) return node;
 
     const adoption = collectAdoptionSnapshot(node);

packages/polyfill/source/NamedNodeMap.ts

@@ -12,12 +12,14 @@ import {
 import {normalizeNamespace} from './names.ts';
 import type {Attr} from './Attr.ts';
 import type {Element} from './Element.ts';
+import type {Document} from './Document.ts';
 import {
   attributeObserversActive,
   queueMutationRecord,
 } from './MutationObserver.ts';
 import {performWithCustomElementReactions} from './custom-element-reactions.ts';
 import {enqueueAttributeReaction} from './attribute-reactions.ts';
+import {adoptNodes} from './shared.ts';
 
 export class NamedNodeMap {
   [CHILD]: Attr | null = null;
@@ -84,7 +86,7 @@ export class NamedNodeMap {
         : qualifiedName;
 
     return performWithCustomElementReactions(() =>
-      this.removeNamedItemImmediately((attr) => attr.name === normalizedName),
+      removeNamedItemImmediately(this, (attr) => attr.name === normalizedName),
     );
   }
 
@@ -93,57 +95,14 @@ export class NamedNodeMap {
     const normalizedLocalName = String(localName);
 
     return performWithCustomElementReactions(() =>
-      this.removeNamedItemImmediately(
+      removeNamedItemImmediately(
+        this,
         (attr) =>
           attr.localName === normalizedLocalName && attr[NS] === namespace,
       ),
     );
   }
 
-  private removeNamedItemImmediately(matches: (attr: Attr) => boolean) {
-    const ownerElement = this[OWNER_ELEMENT];
-    let attr = this[CHILD];
-    let prev: typeof attr | null = null;
-
-    while (attr != null) {
-      if (matches(attr)) {
-        if (prev) prev[NEXT] = attr[NEXT];
-        if (this[CHILD] === attr) this[CHILD] = attr[NEXT];
-        const oldValue = attr.value;
-        attr[NEXT] = null;
-        attr[OWNER_ELEMENT] = null;
-
-        if (attributeObserversActive) {
-          queueMutationRecord({
-            type: 'attributes',
-            target: ownerElement,
-            attributeName: attr.name,
-            attributeNamespace: attr[NS],
-            oldValue,
-          });
-        }
-        ownerElement[HOOKS].removeAttribute?.(
-          ownerElement as any,
-          attr.name,
-          attr[NS],
-        );
-        enqueueAttributeReaction(
-          ownerElement,
-          attr.localName,
-          oldValue,
-          null,
-          attr[NS],
-        );
-        return attr;
-      }
-
-      prev = attr;
-      attr = attr[NEXT];
-    }
-
-    return null;
-  }
-
   setNamedItem(attr: Attr) {
     return performWithCustomElementReactions(() =>
       this.setNamedItemImmediately(attr),
@@ -246,3 +205,77 @@ export class NamedNodeMap {
     }
   }
 }
+
+function removeNamedItemImmediately(
+  attributes: NamedNodeMap,
+  matches: (attr: Attr) => boolean,
+  destination?: Document,
+) {
+  const ownerElement = attributes[OWNER_ELEMENT];
+  let attr = attributes[CHILD];
+  let prev: typeof attr | null = null;
+
+  while (attr != null) {
+    if (matches(attr)) {
+      const qualifiedName = attr.name;
+      const localName = attr.localName;
+      const namespace = attr[NS];
+      const oldValue = attr.value;
+
+      if (prev) prev[NEXT] = attr[NEXT];
+      if (attributes[CHILD] === attr) attributes[CHILD] = attr[NEXT];
+      attr[NEXT] = null;
+      attr[OWNER_ELEMENT] = null;
+      if (destination) adoptNodes([attr], destination);
+
+      if (attributeObserversActive) {
+        queueMutationRecord({
+          type: 'attributes',
+          target: ownerElement,
+          attributeName: qualifiedName,
+          attributeNamespace: namespace,
+          oldValue,
+        });
+      }
+      ownerElement[HOOKS].removeAttribute?.(
+        ownerElement as any,
+        qualifiedName,
+        namespace,
+      );
+      enqueueAttributeReaction(
+        ownerElement,
+        localName,
+        oldValue,
+        null,
+        namespace,
+      );
+      return attr;
+    }
+
+    prev = attr;
+    attr = attr[NEXT];
+  }
+
+  return null;
+}
+
+/** @internal */
+export function removeAttributeForAdoption(
+  attributes: NamedNodeMap,
+  attribute: Attr,
+  destination: Document,
+) {
+  const removed = removeNamedItemImmediately(
+    attributes,
+    (candidate) => candidate === attribute,
+    destination,
+  );
+
+  if (removed == null) {
+    throw new Error(
+      'The owner element does not contain the adopted attribute.',
+    );
+  }
+
+  return removed;
+}