@mml-io/networked-dom-web-client 0.25.0 → 0.26.0

package/build/index.js

@@ -586,51 +586,91 @@ function encodeClientMessage(message, writer, protocolSubversion) {
 }
 
 // ../networked-dom-web/build/index.js
-var DOMSanitizer = class _DOMSanitizer {
-  static sanitise(node, options = {}) {
-    if (node.getAttributeNames) {
-      for (const attr of node.getAttributeNames()) {
-        if (!_DOMSanitizer.IsValidAttributeName(attr)) {
-          node.removeAttribute(attr);
-        }
-      }
+var VIRTUAL_ELEMENT_BRAND = /* @__PURE__ */ Symbol.for("mml-virtual-element");
+var VIRTUAL_TEXT_BRAND = /* @__PURE__ */ Symbol.for("mml-virtual-text");
+function isElementLike(node) {
+  return typeof node.setAttribute === "function";
+}
+function isPortalElement(element) {
+  return typeof element.getPortalElement === "function";
+}
+var _DOMSanitizer = class _DOMSanitizer2 {
+  /**
+   * Returns true if a tag with the given name should be stripped of all
+   * content and attributes during sanitisation.
+   */
+  static isBlockedTag(tagName) {
+    return _DOMSanitizer2.BLOCKED_TAGS.has(tagName.toLowerCase());
+  }
+  /**
+   * Given a tag name and sanitisation options, returns the sanitised tag name.
+   * Non-prefixed tags are renamed (e.g. "div" → "x-div"). Returns null for
+   * blocked tags that should be skipped entirely.
+   */
+  static sanitiseTagName(tagName, options) {
+    const tag = tagName.toLowerCase();
+    if (_DOMSanitizer2.isBlockedTag(tag)) {
+      return null;
     }
-    if (node instanceof HTMLElement) {
-      if (options.tagPrefix) {
-        const tag = node.nodeName.toLowerCase();
-        if (!tag.startsWith(options.tagPrefix.toLowerCase())) {
-          node = _DOMSanitizer.replaceNodeTagName(
-            node,
-            options.replacementTagPrefix ? options.replacementTagPrefix + tag : `x-${tag}`
-          );
-        }
-      }
+    if (options.tagPrefix && !tag.startsWith(options.tagPrefix.toLowerCase())) {
+      return (options.replacementTagPrefix ?? "x-") + tag;
     }
-    if (node.nodeName === "SCRIPT" || node.nodeName === "OBJECT" || node.nodeName === "IFRAME") {
-      node.innerHTML = "";
-      _DOMSanitizer.stripAllAttributes(node);
+    return tag;
+  }
+  /**
+   * Sanitises a DOM node in-place. When tag replacement occurs (via tagPrefix option),
+   * the returned node may be a different object than the input node.
+   */
+  static sanitise(node, options = {}, doc) {
+    if (_DOMSanitizer2.isBlockedTag(node.nodeName)) {
+      if (isElementLike(node)) {
+        node.innerHTML = "";
+        _DOMSanitizer2.stripAllAttributes(node);
+      }
     } else {
-      if (node.getAttributeNames) {
-        for (const attr of node.getAttributeNames()) {
-          if (!_DOMSanitizer.shouldAcceptAttribute(attr)) {
-            node.removeAttribute(attr);
+      if (isElementLike(node)) {
+        let element = node;
+        for (const attr of element.getAttributeNames()) {
+          if (!_DOMSanitizer2.IsValidAttributeName(attr)) {
+            element.removeAttribute(attr);
+          }
+        }
+        if (options.tagPrefix) {
+          const tag = element.nodeName.toLowerCase();
+          if (!tag.startsWith(options.tagPrefix.toLowerCase())) {
+            element = _DOMSanitizer2.replaceNodeTagName(
+              element,
+              (options.replacementTagPrefix ?? "x-") + tag,
+              doc
+            );
+            node = element;
+          }
+        }
+        for (const attr of element.getAttributeNames()) {
+          if (!_DOMSanitizer2.shouldAcceptAttribute(attr)) {
+            element.removeAttribute(attr);
           }
         }
       }
       for (let i = 0; i < node.childNodes.length; i++) {
-        _DOMSanitizer.sanitise(node.childNodes[i], options);
+        _DOMSanitizer2.sanitise(node.childNodes[i], options, doc);
       }
     }
     return node;
   }
-  static replaceNodeTagName(node, newTagName) {
+  static replaceNodeTagName(node, newTagName, doc) {
     var _a;
-    const replacementNode = document.createElement(newTagName);
-    let index;
+    if (!doc && typeof document === "undefined") {
+      throw new Error(
+        "DOMSanitizer.replaceNodeTagName requires a document factory (IDocumentFactory) in non-browser environments"
+      );
+    }
+    const docFactory = doc ?? document;
+    const replacementNode = docFactory.createElement(newTagName);
     while (node.firstChild) {
       replacementNode.appendChild(node.firstChild);
     }
-    for (index = node.attributes.length - 1; index >= 0; --index) {
+    for (let index = node.attributes.length - 1; index >= 0; --index) {
       replacementNode.setAttribute(node.attributes[index].name, node.attributes[index].value);
     }
     (_a = node.parentNode) == null ? void 0 : _a.replaceChild(replacementNode, node);
@@ -651,25 +691,27 @@ var DOMSanitizer = class _DOMSanitizer {
   }
   static IsValidAttributeName(characters) {
     const c = characters[0];
-    if (!(_DOMSanitizer.IsASCIIAlpha(c) || c === ":" || c === "_")) {
+    if (!(_DOMSanitizer2.IsASCIIAlpha(c) || c === ":" || c === "_")) {
       return false;
     }
     for (let i = 1; i < characters.length; i++) {
       const c2 = characters[i];
-      if (!(_DOMSanitizer.IsASCIIDigit(c2) || _DOMSanitizer.IsASCIIAlpha(c2) || c2 === ":" || c2 === "_" || c2 === "-" || c2 === ".")) {
+      if (!(_DOMSanitizer2.IsASCIIDigit(c2) || _DOMSanitizer2.IsASCIIAlpha(c2) || c2 === ":" || c2 === "_" || c2 === "-" || c2 === ".")) {
         return false;
       }
     }
     return true;
   }
   static shouldAcceptAttribute(attribute) {
-    if (!_DOMSanitizer.IsValidAttributeName(attribute)) {
+    if (!_DOMSanitizer2.IsValidAttributeName(attribute)) {
       console.warn("Invalid attribute name", attribute);
       return false;
     }
     return !attribute.startsWith("on");
   }
 };
+_DOMSanitizer.BLOCKED_TAGS = /* @__PURE__ */ new Set(["script", "object", "iframe"]);
+var DOMSanitizer = _DOMSanitizer;
 var ALWAYS_DISALLOWED_TAGS = /* @__PURE__ */ new Set(["foreignobject", "iframe", "script"]);
 var SVG_TAG_NAMES_ADJUSTMENT_MAP = new Map(
   [
@@ -793,7 +835,13 @@ function remapAttributeName(attrName) {
   }
   return attrName;
 }
-function createElementWithSVGSupport(tag, options = {}) {
+function createElementWithSVGSupport(tag, options = {}, doc) {
+  if (!doc && typeof document === "undefined") {
+    throw new Error(
+      "createElementWithSVGSupport requires a document factory (IDocumentFactory) in non-browser environments"
+    );
+  }
+  const docFactory = doc ?? document;
   let filteredTag = tag.toLowerCase();
   if (ALWAYS_DISALLOWED_TAGS.has(filteredTag.toLowerCase())) {
     console.error("Disallowing tag", filteredTag);
@@ -806,14 +854,17 @@ function createElementWithSVGSupport(tag, options = {}) {
   if (svgTagMapping) {
     filteredTag = svgTagMapping;
     const xmlns = "http://www.w3.org/2000/svg";
-    return document.createElementNS(xmlns, filteredTag);
+    if (docFactory.createElementNS) {
+      return docFactory.createElementNS(xmlns, filteredTag);
+    }
+    return docFactory.createElement(filteredTag);
   } else {
     if (options.tagPrefix) {
       if (!tag.toLowerCase().startsWith(options.tagPrefix.toLowerCase())) {
         filteredTag = options.replacementTagPrefix ? options.replacementTagPrefix + tag : `x-${tag}`;
       }
     }
-    return document.createElement(filteredTag);
+    return docFactory.createElement(filteredTag);
   }
 }
 function setElementAttribute(element, key, value) {
@@ -823,21 +874,58 @@ function setElementAttribute(element, key, value) {
   }
 }
 function getChildrenTarget(parent) {
-  let targetForChildren = parent;
-  if (parent.getPortalElement) {
-    targetForChildren = parent.getPortalElement();
+  if (isPortalElement(parent)) {
+    return parent.getPortalElement();
   }
-  return targetForChildren;
+  return parent;
 }
 function getRemovalTarget(parent) {
-  let targetForRemoval = parent;
-  if (parent.getPortalElement) {
-    targetForRemoval = parent.getPortalElement();
+  if (isPortalElement(parent)) {
+    return parent.getPortalElement();
   }
-  return targetForRemoval;
+  return parent;
 }
-var NetworkedDOMWebsocketV01Adapter = class {
-  constructor(websocket, parentElement, connectedCallback, timeCallback, options = {}) {
+function resolveChildFactory(parentNode, elementFactoryOverride) {
+  var _a;
+  if (isElementLike(parentNode) && isPortalElement(parentNode)) {
+    const portalFactory = (_a = parentNode.getPortalDocumentFactory) == null ? void 0 : _a.call(parentNode);
+    if (portalFactory) {
+      return portalFactory;
+    }
+  }
+  return elementFactoryOverride.get(parentNode);
+}
+function resolvePortalChildFactory(element, currentFactory) {
+  var _a;
+  if (isPortalElement(element)) {
+    const portalFactory = (_a = element.getPortalDocumentFactory) == null ? void 0 : _a.call(element);
+    if (portalFactory) {
+      return { childFactory: portalFactory, usingPortalFactory: true };
+    }
+  }
+  return { childFactory: currentFactory, usingPortalFactory: false };
+}
+function recordFactoryOverride(element, factory, defaultFactory, elementFactoryOverride) {
+  if (factory !== defaultFactory) {
+    elementFactoryOverride.set(element, factory);
+  }
+}
+function flushPendingPortalChildren(pendingPortalChildren) {
+  for (const [portalParent, children] of pendingPortalChildren) {
+    const target = getChildrenTarget(portalParent);
+    for (const child of children) {
+      target.appendChild(child);
+    }
+  }
+  pendingPortalChildren.clear();
+}
+function bufferPortalChild(pendingPortalChildren, portalParent, child) {
+  const pending = pendingPortalChildren.get(portalParent) ?? [];
+  pending.push(child);
+  pendingPortalChildren.set(portalParent, pending);
+}
+var NetworkedDOMWebsocketAdapterBase = class {
+  constructor(websocket, parentElement, connectedCallback, timeCallback, options = {}, doc) {
     this.websocket = websocket;
     this.parentElement = parentElement;
     this.connectedCallback = connectedCallback;
@@ -846,7 +934,117 @@ var NetworkedDOMWebsocketV01Adapter = class {
     this.idToElement = /* @__PURE__ */ new Map();
     this.elementToId = /* @__PURE__ */ new Map();
     this.currentRoot = null;
+    this.pendingPortalChildren = /* @__PURE__ */ new Map();
+    this.elementFactoryOverride = /* @__PURE__ */ new Map();
     this.websocket.binaryType = "arraybuffer";
+    if (!doc && typeof document === "undefined") {
+      throw new Error(
+        "NetworkedDOMWebsocketAdapter requires a document factory (IDocumentFactory) in non-browser environments"
+      );
+    }
+    this.docFactory = doc ?? document;
+  }
+  clearContents() {
+    this.idToElement.clear();
+    this.elementToId.clear();
+    this.elementFactoryOverride.clear();
+    this.pendingPortalChildren.clear();
+    if (this.currentRoot) {
+      this.currentRoot.remove();
+      this.currentRoot = null;
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Creates a text node, registers it in the id maps, and returns it.
+   */
+  createTextNode(nodeId, text, factory) {
+    const textNode = factory.createTextNode("");
+    textNode.textContent = text;
+    this.idToElement.set(nodeId, textNode);
+    this.elementToId.set(textNode, nodeId);
+    return textNode;
+  }
+  /**
+   * Inserts elements into the correct position within a parent, using
+   * previousElement/nextElement for positioning. Creates a DocumentFragment
+   * when inserting before a reference node.
+   */
+  insertElements(targetForChildren, elementsToAdd, previousElement, nextElement, factory) {
+    if (elementsToAdd.length === 0) return;
+    if (previousElement) {
+      if (nextElement) {
+        const docFrag = factory.createDocumentFragment();
+        docFrag.append(...elementsToAdd);
+        targetForChildren.insertBefore(docFrag, nextElement);
+      } else {
+        targetForChildren.append(...elementsToAdd);
+      }
+    } else {
+      targetForChildren.prepend(...elementsToAdd);
+    }
+  }
+  /**
+   * Recursively removes element-to-id mappings for all descendants of a parent.
+   * V02 overrides this to also handle hidden placeholder elements.
+   */
+  removeChildElementIds(parent) {
+    if (isElementLike(parent)) {
+      const portal = getChildrenTarget(parent);
+      if (portal !== parent) {
+        this.removeChildElementIds(portal);
+      }
+    }
+    for (let i = 0; i < parent.childNodes.length; i++) {
+      const child = parent.childNodes[i];
+      const childId = this.elementToId.get(child);
+      if (!childId) {
+        this.handleUnregisteredChild(child);
+      } else {
+        this.elementToId.delete(child);
+        this.idToElement.delete(childId);
+        this.elementFactoryOverride.delete(child);
+      }
+      this.removeChildElementIds(child);
+    }
+  }
+  /**
+   * Called during removeChildElementIds when a child has no registered id.
+   * V01 logs an error. V02 overrides to check for placeholder elements.
+   */
+  handleUnregisteredChild(child) {
+    console.error("Inner child of removed element had no id", child);
+  }
+  /**
+   * Resets state and applies a snapshot element to the parent.
+   * Appending to the tree triggers MElement connectedCallbacks (which set up portals),
+   * then pending portal children are flushed.
+   */
+  resetAndApplySnapshot(element) {
+    if (this.currentRoot) {
+      this.removeChildElementIds(this.currentRoot);
+      const rootId = this.elementToId.get(this.currentRoot);
+      if (rootId !== void 0) {
+        this.elementToId.delete(this.currentRoot);
+        this.idToElement.delete(rootId);
+        this.elementFactoryOverride.delete(this.currentRoot);
+      }
+      this.currentRoot.remove();
+      this.currentRoot = null;
+      this.pendingPortalChildren.clear();
+    }
+    if (!isHTMLElement(element, this.parentElement)) {
+      throw new Error("Snapshot element is not an HTMLElement");
+    }
+    this.currentRoot = element;
+    this.parentElement.append(element);
+    flushPendingPortalChildren(this.pendingPortalChildren);
+  }
+};
+var NetworkedDOMWebsocketV01Adapter = class extends NetworkedDOMWebsocketAdapterBase {
+  constructor(websocket, parentElement, connectedCallback, timeCallback, options = {}, doc) {
+    super(websocket, parentElement, connectedCallback, timeCallback, options, doc);
   }
   handleEvent(element, event) {
     const nodeId = this.elementToId.get(element);
@@ -869,16 +1067,6 @@ var NetworkedDOMWebsocketV01Adapter = class {
   send(fromClientMessage) {
     this.websocket.send(JSON.stringify(fromClientMessage));
   }
-  clearContents() {
-    this.idToElement.clear();
-    this.elementToId.clear();
-    if (this.currentRoot) {
-      this.currentRoot.remove();
-      this.currentRoot = null;
-      return true;
-    }
-    return false;
-  }
   receiveMessage(event) {
     try {
       const messages = JSON.parse(event.data);
@@ -950,14 +1138,15 @@ var NetworkedDOMWebsocketV01Adapter = class {
       console.warn("No nodeId in childrenChanged message");
       return;
     }
-    const parent = this.idToElement.get(nodeId);
-    if (!parent) {
+    const parentNode = this.idToElement.get(nodeId);
+    if (!parentNode) {
       throw new Error("No parent found for childrenChanged message");
     }
-    if (!isHTMLElement(parent, this.parentElement)) {
+    if (!isHTMLElement(parentNode, this.parentElement)) {
       throw new Error("Parent is not an HTMLElement (that supports children)");
     }
-    const targetForChildren = getChildrenTarget(parent);
+    const childFactory = resolveChildFactory(parentNode, this.elementFactoryOverride);
+    const targetForChildren = getChildrenTarget(parentNode);
     let nextElement = null;
     let previousElement = null;
     if (previousNodeId) {
@@ -969,23 +1158,20 @@ var NetworkedDOMWebsocketV01Adapter = class {
     }
     const elementsToAdd = [];
     for (const addedNode of addedNodes) {
-      const childElement = this.handleNewElement(addedNode);
+      const childElement = this.handleNewElement(addedNode, childFactory);
       if (childElement) {
         elementsToAdd.push(childElement);
       }
     }
-    if (elementsToAdd.length) {
-      if (previousElement) {
-        if (nextElement) {
-          const docFrag = new DocumentFragment();
-          docFrag.append(...elementsToAdd);
-          targetForChildren.insertBefore(docFrag, nextElement);
-        } else {
-          targetForChildren.append(...elementsToAdd);
-        }
-      } else {
-        targetForChildren.prepend(...elementsToAdd);
-      }
+    this.insertElements(
+      targetForChildren,
+      elementsToAdd,
+      previousElement,
+      nextElement,
+      childFactory ?? this.docFactory
+    );
+    if (this.pendingPortalChildren.size > 0) {
+      flushPendingPortalChildren(this.pendingPortalChildren);
     }
     for (const removedNode of removedNodes) {
       const childElement = this.idToElement.get(removedNode);
@@ -994,46 +1180,19 @@ var NetworkedDOMWebsocketV01Adapter = class {
       }
       this.elementToId.delete(childElement);
       this.idToElement.delete(removedNode);
-      const targetForRemoval = getRemovalTarget(parent);
+      const targetForRemoval = getRemovalTarget(parentNode);
       targetForRemoval.removeChild(childElement);
       if (isHTMLElement(childElement, this.parentElement)) {
         this.removeChildElementIds(childElement);
       }
     }
   }
-  removeChildElementIds(parent) {
-    const portal = getChildrenTarget(parent);
-    if (portal !== parent) {
-      this.removeChildElementIds(portal);
-    }
-    for (let i = 0; i < parent.childNodes.length; i++) {
-      const child = parent.childNodes[i];
-      const childId = this.elementToId.get(child);
-      if (!childId) {
-        console.error("Inner child of removed element had no id", child);
-      } else {
-        this.elementToId.delete(child);
-        this.idToElement.delete(childId);
-      }
-      this.removeChildElementIds(child);
-    }
-  }
   handleSnapshot(message) {
-    if (this.currentRoot) {
-      this.currentRoot.remove();
-      this.currentRoot = null;
-      this.elementToId.clear();
-      this.idToElement.clear();
-    }
     const element = this.handleNewElement(message.snapshot);
     if (!element) {
       throw new Error("Snapshot element not created");
     }
-    if (!isHTMLElement(element, this.parentElement)) {
-      throw new Error("Snapshot element is not an HTMLElement");
-    }
-    this.currentRoot = element;
-    this.parentElement.append(element);
+    this.resetAndApplySnapshot(element);
   }
   handleAttributeChange(message) {
     const { nodeId, attribute, newValue } = message;
@@ -1041,29 +1200,25 @@ var NetworkedDOMWebsocketV01Adapter = class {
       console.warn("No nodeId in attributeChange message");
       return;
     }
-    const element = this.idToElement.get(nodeId);
-    if (element) {
-      if (isHTMLElement(element, this.parentElement)) {
+    const node = this.idToElement.get(nodeId);
+    if (node) {
+      if (isHTMLElement(node, this.parentElement)) {
         if (newValue === null) {
-          element.removeAttribute(attribute);
+          node.removeAttribute(attribute);
         } else {
-          setElementAttribute(element, attribute, newValue);
+          setElementAttribute(node, attribute, newValue);
         }
       } else {
-        console.error("Element is not an HTMLElement and cannot support attributes", element);
+        console.error("Element is not an HTMLElement and cannot support attributes", node);
       }
     } else {
       console.error("No element found for attributeChange message");
     }
   }
-  handleNewElement(message) {
+  handleNewElement(message, factoryOverride) {
+    const factory = factoryOverride ?? this.docFactory;
     if (message.type === "text") {
-      const { nodeId: nodeId2, text: text2 } = message;
-      const textNode = document.createTextNode("");
-      textNode.textContent = text2;
-      this.idToElement.set(nodeId2, textNode);
-      this.elementToId.set(textNode, nodeId2);
-      return textNode;
+      return this.createTextNode(message.nodeId, message.text, factory);
     }
     const { tag, nodeId, attributes, children, text } = message;
     if (nodeId === void 0 || nodeId === null) {
@@ -1078,18 +1233,14 @@ var NetworkedDOMWebsocketV01Adapter = class {
       );
     }
     if (tag === "#text") {
-      const textNode = document.createTextNode("");
-      textNode.textContent = text || null;
-      this.idToElement.set(nodeId, textNode);
-      this.elementToId.set(textNode, nodeId);
-      return textNode;
+      return this.createTextNode(nodeId, text || "", factory);
     }
     let element;
     try {
-      element = createElementWithSVGSupport(tag, this.options);
+      element = createElementWithSVGSupport(tag, this.options, factory);
     } catch (e) {
       console.error(`Error creating element: (${tag})`, e);
-      element = document.createElement("x-div");
+      element = factory.createElement("x-div");
     }
     this.idToElement.set(nodeId, element);
     this.elementToId.set(element, nodeId);
@@ -1097,11 +1248,17 @@ var NetworkedDOMWebsocketV01Adapter = class {
       const value = attributes[key];
       setElementAttribute(element, key, value);
     }
+    recordFactoryOverride(element, factory, this.docFactory, this.elementFactoryOverride);
+    const { childFactory, usingPortalFactory } = resolvePortalChildFactory(element, factory);
     if (children) {
       for (const child of children) {
-        const childElement = this.handleNewElement(child);
+        const childElement = this.handleNewElement(child, childFactory);
         if (childElement) {
-          element.append(childElement);
+          if (usingPortalFactory) {
+            bufferPortalChild(this.pendingPortalChildren, element, childElement);
+          } else {
+            element.append(childElement);
+          }
         }
       }
     }
@@ -1110,21 +1267,13 @@ var NetworkedDOMWebsocketV01Adapter = class {
 };
 var connectionId = 1;
 var hiddenTag = "x-hidden";
-var NetworkedDOMWebsocketV02Adapter = class {
-  constructor(websocket, parentElement, connectedCallback, timeCallback, options = {}) {
-    this.websocket = websocket;
-    this.parentElement = parentElement;
-    this.connectedCallback = connectedCallback;
-    this.timeCallback = timeCallback;
-    this.options = options;
-    this.idToElement = /* @__PURE__ */ new Map();
-    this.elementToId = /* @__PURE__ */ new Map();
+var NetworkedDOMWebsocketV02Adapter = class extends NetworkedDOMWebsocketAdapterBase {
+  constructor(websocket, parentElement, connectedCallback, timeCallback, options = {}, doc) {
+    super(websocket, parentElement, connectedCallback, timeCallback, options, doc);
     this.placeholderToId = /* @__PURE__ */ new Map();
     this.hiddenPlaceholderElements = /* @__PURE__ */ new Map();
-    this.currentRoot = null;
     this.batchMode = false;
     this.batchMessages = [];
-    this.websocket.binaryType = "arraybuffer";
     this.protocolSubversion = getNetworkedDOMProtocolSubProtocol_v0_2SubversionOrThrow(
       websocket.protocol
     );
@@ -1160,14 +1309,11 @@ var NetworkedDOMWebsocketV02Adapter = class {
     this.websocket.send(writer.getBuffer());
   }
   clearContents() {
-    this.idToElement.clear();
-    this.elementToId.clear();
-    if (this.currentRoot) {
-      this.currentRoot.remove();
-      this.currentRoot = null;
-      return true;
-    }
-    return false;
+    this.placeholderToId.clear();
+    this.hiddenPlaceholderElements.clear();
+    this.batchMessages = [];
+    this.batchMode = false;
+    return super.clearContents();
   }
   receiveMessage(event) {
     try {
@@ -1262,13 +1408,14 @@ var NetworkedDOMWebsocketV02Adapter = class {
       if (!node) {
         throw new Error("No node found for changeHiddenFrom message");
       }
-      const parent = node.parentElement;
+      const element = node;
+      const parent = element.parentElement;
       if (!parent) {
         throw new Error("Node has no parent");
       }
-      const placeholder = document.createElement(hiddenTag);
-      parent.replaceChild(placeholder, node);
-      this.hiddenPlaceholderElements.set(nodeId, { placeholder, element: node });
+      const placeholder = this.docFactory.createElement(hiddenTag);
+      parent.replaceChild(placeholder, element);
+      this.hiddenPlaceholderElements.set(nodeId, { placeholder, element });
       this.placeholderToId.set(placeholder, nodeId);
     } else if (removeHiddenFrom.length > 0 && removeHiddenFrom.indexOf(connectionId) !== -1) {
       if (!hiddenElement) {
@@ -1290,18 +1437,19 @@ var NetworkedDOMWebsocketV02Adapter = class {
       console.warn("No nodeId in childrenChanged message");
       return;
     }
-    let parent = this.idToElement.get(nodeId);
-    if (!parent) {
+    let parentNode = this.idToElement.get(nodeId);
+    if (!parentNode) {
       throw new Error("No parent found for childrenChanged message");
     }
     const hiddenParent = this.hiddenPlaceholderElements.get(nodeId);
     if (hiddenParent) {
-      parent = hiddenParent.element;
+      parentNode = hiddenParent.element;
     }
-    if (!isHTMLElement(parent, this.parentElement)) {
+    if (!isHTMLElement(parentNode, this.parentElement)) {
       throw new Error("Parent is not an HTMLElement (that supports children)");
     }
-    const targetForChildren = getChildrenTarget(parent);
+    const childFactory = resolveChildFactory(parentNode, this.elementFactoryOverride);
+    const targetForChildren = getChildrenTarget(parentNode);
     let nextElement = null;
     let previousElement = null;
     if (previousNodeId) {
@@ -1313,23 +1461,20 @@ var NetworkedDOMWebsocketV02Adapter = class {
     }
     const elementsToAdd = [];
     for (const addedNode of addedNodes) {
-      const childElement = this.handleNewElement(addedNode);
+      const childElement = this.handleNewElement(addedNode, childFactory);
       if (childElement) {
         elementsToAdd.push(childElement);
       }
     }
-    if (elementsToAdd.length) {
-      if (previousElement) {
-        if (nextElement) {
-          const docFrag = new DocumentFragment();
-          docFrag.append(...elementsToAdd);
-          targetForChildren.insertBefore(docFrag, nextElement);
-        } else {
-          targetForChildren.append(...elementsToAdd);
-        }
-      } else {
-        targetForChildren.prepend(...elementsToAdd);
-      }
+    this.insertElements(
+      targetForChildren,
+      elementsToAdd,
+      previousElement,
+      nextElement,
+      childFactory ?? this.docFactory
+    );
+    if (this.pendingPortalChildren.size > 0) {
+      flushPendingPortalChildren(this.pendingPortalChildren);
     }
   }
   handleChildrenRemoved(message) {
@@ -1338,11 +1483,11 @@ var NetworkedDOMWebsocketV02Adapter = class {
       console.warn("No nodeId in childrenChanged message");
       return;
     }
-    const parent = this.idToElement.get(nodeId);
-    if (!parent) {
+    const parentNode = this.idToElement.get(nodeId);
+    if (!parentNode) {
       throw new Error("No parent found for childrenChanged message");
     }
-    if (!isHTMLElement(parent, this.parentElement)) {
+    if (!isHTMLElement(parentNode, this.parentElement)) {
       throw new Error("Parent is not an HTMLElement (that supports children)");
     }
     for (const removedNode of removedNodes) {
@@ -1352,7 +1497,7 @@ var NetworkedDOMWebsocketV02Adapter = class {
       }
       this.elementToId.delete(childElement);
       this.idToElement.delete(removedNode);
-      const targetForRemoval = getRemovalTarget(parent);
+      const targetForRemoval = getRemovalTarget(parentNode);
       const hiddenElement = this.hiddenPlaceholderElements.get(removedNode);
       if (hiddenElement) {
         const placeholder = hiddenElement.placeholder;
@@ -1378,62 +1523,36 @@ var NetworkedDOMWebsocketV02Adapter = class {
       }
     }
   }
-  removeChildElementIds(parent) {
-    const portal = getChildrenTarget(parent);
-    if (portal !== parent) {
-      this.removeChildElementIds(portal);
-    }
-    const childNodes = parent.childNodes;
-    for (let i = 0; i < childNodes.length; i++) {
-      const child = childNodes[i];
-      const childId = this.elementToId.get(child);
-      if (!childId) {
-        const placeholderId = this.placeholderToId.get(child);
-        if (placeholderId) {
-          const childElement = this.idToElement.get(placeholderId);
-          if (childElement) {
-            this.elementToId.delete(childElement);
-          } else {
-            console.error(
-              "Inner child of removed placeholder element not found by id",
-              placeholderId
-            );
-          }
-          this.idToElement.delete(placeholderId);
-          this.placeholderToId.delete(child);
-          this.hiddenPlaceholderElements.delete(placeholderId);
-          this.removeChildElementIds(childElement);
-        } else {
-          console.error(
-            "Inner child of removed element had no id",
-            child.outerHTML
-          );
-        }
+  handleUnregisteredChild(child) {
+    const placeholderId = this.placeholderToId.get(child);
+    if (placeholderId) {
+      const childElement = this.idToElement.get(placeholderId);
+      if (childElement) {
+        this.elementToId.delete(childElement);
       } else {
-        this.elementToId.delete(child);
-        this.idToElement.delete(childId);
-        this.removeChildElementIds(child);
+        console.error("Inner child of removed placeholder element not found by id", placeholderId);
+      }
+      this.idToElement.delete(placeholderId);
+      this.placeholderToId.delete(child);
+      this.hiddenPlaceholderElements.delete(placeholderId);
+      if (childElement) {
+        this.removeChildElementIds(childElement);
       }
+    } else {
+      console.error(
+        "Inner child of removed element had no id",
+        (child == null ? void 0 : child.outerHTML) ?? child
+      );
     }
   }
   handleSnapshot(message) {
     var _a;
-    if (this.currentRoot) {
-      this.currentRoot.remove();
-      this.currentRoot = null;
-      this.elementToId.clear();
-      this.idToElement.clear();
-    }
     (_a = this.timeCallback) == null ? void 0 : _a.call(this, message.documentTime);
     const element = this.handleNewElement(message.snapshot);
     if (!element) {
       throw new Error("Snapshot element not created");
     }
-    if (!isHTMLElement(element, this.parentElement)) {
-      throw new Error("Snapshot element is not an HTMLElement");
-    }
-    this.currentRoot = element;
-    this.parentElement.append(element);
+    this.resetAndApplySnapshot(element);
   }
   handleDocumentTime(message) {
     var _a;
@@ -1445,35 +1564,31 @@ var NetworkedDOMWebsocketV02Adapter = class {
       console.warn("No nodeId in attributeChange message");
       return;
     }
-    let element = this.idToElement.get(nodeId);
+    let node = this.idToElement.get(nodeId);
     const hiddenElement = this.hiddenPlaceholderElements.get(nodeId);
     if (hiddenElement) {
-      element = hiddenElement.element;
+      node = hiddenElement.element;
     }
-    if (element) {
-      if (isHTMLElement(element, this.parentElement)) {
+    if (node) {
+      if (isHTMLElement(node, this.parentElement)) {
         for (const [key, newValue] of attributes) {
           if (newValue === null) {
-            element.removeAttribute(key);
+            node.removeAttribute(key);
           } else {
-            setElementAttribute(element, key, newValue);
+            setElementAttribute(node, key, newValue);
           }
         }
       } else {
-        console.error("Element is not an HTMLElement and cannot support attributes", element);
+        console.error("Element is not an HTMLElement and cannot support attributes", node);
       }
     } else {
       console.error("No element found for attributeChange message");
     }
   }
-  handleNewElement(message) {
+  handleNewElement(message, factoryOverride) {
+    const factory = factoryOverride ?? this.docFactory;
     if (message.type === "text") {
-      const { nodeId: nodeId2, text: text2 } = message;
-      const textNode = document.createTextNode("");
-      textNode.textContent = text2;
-      this.idToElement.set(nodeId2, textNode);
-      this.elementToId.set(textNode, nodeId2);
-      return textNode;
+      return this.createTextNode(message.nodeId, message.text, factory);
     }
     const { tag, nodeId, attributes, children, text, hiddenFrom } = message;
     if (this.idToElement.has(nodeId)) {
@@ -1485,34 +1600,36 @@ var NetworkedDOMWebsocketV02Adapter = class {
       throw new Error("Received nodeId to add that is already present: " + nodeId);
     }
     if (tag === "#text") {
-      const textNode = document.createTextNode("");
-      textNode.textContent = text || null;
-      this.idToElement.set(nodeId, textNode);
-      this.elementToId.set(textNode, nodeId);
-      return textNode;
+      return this.createTextNode(nodeId, text || "", factory);
     }
     let element;
     try {
-      element = createElementWithSVGSupport(tag, this.options);
+      element = createElementWithSVGSupport(tag, this.options, factory);
     } catch (e) {
       console.error(`Error creating element: (${tag})`, e);
-      element = document.createElement("x-div");
+      element = factory.createElement("x-div");
     }
     for (const [key, value] of attributes) {
       if (value !== null) {
         setElementAttribute(element, key, value);
       }
     }
+    recordFactoryOverride(element, factory, this.docFactory, this.elementFactoryOverride);
+    const { childFactory, usingPortalFactory } = resolvePortalChildFactory(element, factory);
     if (children) {
       for (const child of children) {
-        const childElement = this.handleNewElement(child);
+        const childElement = this.handleNewElement(child, childFactory);
         if (childElement) {
-          element.append(childElement);
+          if (usingPortalFactory) {
+            bufferPortalChild(this.pendingPortalChildren, element, childElement);
+          } else {
+            element.append(childElement);
+          }
         }
       }
     }
     if (hiddenFrom && hiddenFrom.length > 0 && hiddenFrom.indexOf(connectionId) !== -1) {
-      const placeholder = document.createElement(hiddenTag);
+      const placeholder = this.docFactory.createElement(hiddenTag);
       this.hiddenPlaceholderElements.set(nodeId, { placeholder, element });
       this.placeholderToId.set(placeholder, nodeId);
       this.idToElement.set(nodeId, element);
@@ -1537,13 +1654,14 @@ var startingBackoffTimeMilliseconds = 100;
 var maximumBackoffTimeMilliseconds = 1e4;
 var maximumWebsocketConnectionTimeout = 3e4;
 var NetworkedDOMWebsocket = class {
-  constructor(url, websocketFactory, parentElement, timeCallback, statusUpdateCallback, options = {}) {
+  constructor(url, websocketFactory, parentElement, timeCallback, statusUpdateCallback, options = {}, doc) {
     this.url = url;
     this.websocketFactory = websocketFactory;
     this.parentElement = parentElement;
     this.timeCallback = timeCallback;
     this.statusUpdateCallback = statusUpdateCallback;
     this.options = options;
+    this.doc = doc;
     this.websocket = null;
     this.websocketAdapter = null;
     this.stopped = false;
@@ -1594,7 +1712,8 @@ var NetworkedDOMWebsocket = class {
               );
             },
             this.timeCallback,
-            this.options
+            this.options,
+            this.doc
           );
         } else {
           websocketAdapter = new NetworkedDOMWebsocketV01Adapter(
@@ -1608,7 +1727,8 @@ var NetworkedDOMWebsocket = class {
               );
             },
             this.timeCallback,
-            this.options
+            this.options,
+            this.doc
           );
         }
         this.websocketAdapter = websocketAdapter;
@@ -1712,22 +1832,35 @@ var NetworkedDOMWebsocket = class {
   }
 };
 function isHTMLElement(node, rootNode) {
-  if (node instanceof HTMLElement || node instanceof Element) {
-    return true;
-  }
-  if (!rootNode.ownerDocument.defaultView) {
-    return false;
-  }
-  return node instanceof rootNode.ownerDocument.defaultView.HTMLElement;
+  if (!node || typeof node !== "object") return false;
+  const nodeLike = node;
+  if (nodeLike[VIRTUAL_ELEMENT_BRAND] === true) return true;
+  if (typeof HTMLElement !== "undefined" && node instanceof HTMLElement) return true;
+  if (typeof Element !== "undefined" && node instanceof Element) return true;
+  const rootNodeRecord = rootNode;
+  if (rootNodeRecord == null ? void 0 : rootNodeRecord.ownerDocument) {
+    const ownerDoc = rootNodeRecord.ownerDocument;
+    const defaultView = ownerDoc.defaultView;
+    if (defaultView == null ? void 0 : defaultView.HTMLElement) {
+      return node instanceof defaultView.HTMLElement;
+    }
+  }
+  return false;
 }
 function isText(node, rootNode) {
-  if (node instanceof Text) {
-    return true;
-  }
-  if (!rootNode.ownerDocument.defaultView) {
-    return false;
-  }
-  return node instanceof rootNode.ownerDocument.defaultView.Text;
+  if (!node || typeof node !== "object") return false;
+  const nodeLike = node;
+  if (nodeLike[VIRTUAL_TEXT_BRAND] === true) return true;
+  if (typeof Text !== "undefined" && node instanceof Text) return true;
+  const rootNodeRecord = rootNode;
+  if (rootNodeRecord == null ? void 0 : rootNodeRecord.ownerDocument) {
+    const ownerDoc = rootNodeRecord.ownerDocument;
+    const defaultView = ownerDoc.defaultView;
+    if (defaultView == null ? void 0 : defaultView.Text) {
+      return node instanceof defaultView.Text;
+    }
+  }
+  return false;
 }
 
 // src/index.ts