@remote-dom/polyfill 1.5.1 → 1.6.0

package/build/esnext/selectors.esnext

@@ -1,9 +1,53 @@
-import { CHILD, NEXT, PARENT, PREV } from './constants.esnext';
+import { CHILD, asciiLowercase, NEXT, splitOnASCIIWhitespace, HTML_NAMESPACE, PARENT, PREV } from './constants.esnext';
 import { isElementNode } from './shared.esnext';
+import { NodeList } from './NodeList.esnext';
+import { createDOMException } from './dom-exception.esnext';
 
-const ELEMENT_SELECTOR_TEST = /[a-z]/;
+const COMBINATOR_DESCENDANT = 0;
+const COMBINATOR_CHILD = 1;
+const COMBINATOR_SIBLING = 2;
+const COMBINATOR_ADJACENT = 3;
+const COMBINATOR_INNER = 4;
+const MATCHER_UNKNOWN = 0;
+const MATCHER_ELEMENT = 1;
+const MATCHER_ID = 2;
+const MATCHER_CLASS = 3;
+const MATCHER_ATTRIBUTE = 4;
+const MATCHER_PSEUDO = 5;
+const MATCHER_FUNCTION = 6;
+const MATCHER_SCOPE = 7;
+const SUPPORTED_IDENTIFIER_TEST = /^(?:--|-?[A-Za-z_\u0080-\u{10FFFF}])[A-Za-z0-9_\u0080-\u{10FFFF}-]*$/u;
+function readFunctionArgument(selector, start) {
+  let depth = 1;
+  let quote = null;
+  for (let index = start; index < selector.length; index++) {
+    const character = selector[index];
+    if (quote) {
+      if (character === "\\") {
+        index++;
+      } else if (character === quote) {
+        quote = null;
+      }
+      continue;
+    }
+    if (character === '"' || character === "'") {
+      quote = character;
+    } else if (character === "(") {
+      depth++;
+    } else if (character === ")" && --depth === 0) {
+      return [selector.slice(start, index), index + 1];
+    }
+  }
+  return [selector.slice(start), selector.length];
+}
+function throwSelectorSyntaxError(selector) {
+  throw createDOMException(
+    `Invalid or unsupported selector: "${selector}"`,
+    "SyntaxError"
+  );
+}
 function querySelector(within, selector) {
-  const parts = parseSelector(selector);
+  const parts = typeof selector === "string" ? parseSelector(selector) : [{ combinator: COMBINATOR_INNER, matchers: selector }];
   let result = null;
   const child = within[CHILD];
   if (child && parts[0].matchers.length) {
@@ -15,8 +59,8 @@ function querySelector(within, selector) {
   return result;
 }
 function querySelectorAll(within, selector) {
-  const parts = parseSelector(selector);
-  const results = [];
+  const parts = typeof selector === "string" ? parseSelector(selector) : [{ combinator: COMBINATOR_INNER, matchers: selector }];
+  const results = new NodeList();
   const child = within[CHILD];
   if (child && parts[0].matchers.length) {
     walkNodesForSelector(child, parts, (node) => {
@@ -25,163 +69,221 @@ function querySelectorAll(within, selector) {
   }
   return results;
 }
-function parseSelector(selector) {
-  let part = { combinator: 4 /* Inner */, matchers: [] };
+function parseSelector(selector, insideHas = false, allowLeadingCombinator = false) {
+  let part = { combinator: COMBINATOR_INNER, matchers: [] };
   const parts = [part];
-  const tokenizer = /\s*?([>\s+~]?)\s*?(?:(?:\[\s*([^\]=]+)(?:=(['"])(.*?)\3)?\s*\])|([#.]?)([^\s#.[>:+~]+)|:(\w+)(?:\((.*?)\))?)/gi;
+  const tokenizer = /[\t\n\f\r ]*?([>\t\n\f\r +~]?)[\t\n\f\r ]*?(?:(?:\[[\t\n\f\r ]*([^\]=\t\n\f\r ]+)[\t\n\f\r ]*(?:=[\t\n\f\r ]*(?:(['"])(.*?)\3|([^\]\t\n\f\r ]+)))?[\t\n\f\r ]*(?:\]|$))|([#.]?)([^\t\n\f\r #.[>:+~()]+)|:(\w+)(\()?)/gi;
+  const normalizedSelector = selector.replace(
+    /^[\t\n\f\r ]+|[\t\n\f\r ]+$/g,
+    ""
+  );
+  if (normalizedSelector === "") throwSelectorSyntaxError(selector);
+  let consumed = 0;
   let token;
-  while (token = tokenizer.exec(selector)) {
+  while (token = tokenizer.exec(normalizedSelector)) {
+    if (token.index !== consumed) throwSelectorSyntaxError(selector);
     if (token[1]) {
-      if (token[1] === ">") part.combinator = 1 /* Child */;
-      else if (token[1] === "+") part.combinator = 3 /* Adjacent */;
-      else if (token[1] === "~") part.combinator = 2 /* Sibling */;
-      else part.combinator = 0 /* Descendant */;
-      part = { combinator: 4 /* Inner */, matchers: [] };
+      if (part.matchers.length === 0 && !(allowLeadingCombinator && parts.length === 1)) {
+        throwSelectorSyntaxError(selector);
+      }
+      if (token[1] === ">") part.combinator = COMBINATOR_CHILD;
+      else if (token[1] === "+") part.combinator = COMBINATOR_ADJACENT;
+      else if (token[1] === "~") part.combinator = COMBINATOR_SIBLING;
+      else part.combinator = COMBINATOR_DESCENDANT;
+      part = { combinator: COMBINATOR_INNER, matchers: [] };
       parts.push(part);
     }
-    let type = 0 /* Unknown */;
+    const name = token[8] ? asciiLowercase(token[8]) : token[2] || token[7];
+    const isTypeSelector = token[7] != null && !token[6];
+    if (isTypeSelector && part.matchers.length > 0) {
+      throwSelectorSyntaxError(selector);
+    }
+    let type;
+    let value = token[4] ?? token[5] ?? token[7];
     if (token[2]) {
-      type = 4 /* Attribute */;
-    } else if (token[5]) {
-      type = token[5] === "#" ? 2 /* Id */ : 3 /* Class */;
-    } else if (token[7]) {
-      type = token[8] == null ? 5 /* Pseudo */ : 6 /* Function */;
+      if (!SUPPORTED_IDENTIFIER_TEST.test(name)) {
+        throwSelectorSyntaxError(selector);
+      }
+      const unquotedValue = token[5];
+      const openingQuote = unquotedValue?.[0];
+      if (token[3] == null && (openingQuote === '"' || openingQuote === "'")) {
+        const valueOffset = token[0].lastIndexOf(unquotedValue);
+        value = normalizedSelector.slice(token.index + valueOffset + 1);
+        tokenizer.lastIndex = normalizedSelector.length;
+      } else if (unquotedValue != null && !SUPPORTED_IDENTIFIER_TEST.test(unquotedValue)) {
+        throwSelectorSyntaxError(selector);
+      }
+      type = MATCHER_ATTRIBUTE;
     } else if (token[6]) {
-      if (token[6] === "*") {
-        type = 0 /* Unknown */;
-      } else if (ELEMENT_SELECTOR_TEST.test(token[6])) {
-        type = 1 /* Element */;
+      if (!SUPPORTED_IDENTIFIER_TEST.test(name)) {
+        throwSelectorSyntaxError(selector);
       }
+      type = token[6] === "#" ? MATCHER_ID : MATCHER_CLASS;
+    } else if (token[8]) {
+      type = token[9] == null ? MATCHER_PSEUDO : MATCHER_FUNCTION;
+    } else if (token[7] === "*") {
+      type = MATCHER_UNKNOWN;
+    } else if (token[7] && SUPPORTED_IDENTIFIER_TEST.test(token[7])) {
+      type = MATCHER_ELEMENT;
+    } else {
+      throwSelectorSyntaxError(selector);
     }
-    part.matchers.push({
-      type,
-      name: token[2] || token[6] || token[7],
-      value: token[4] ?? token[6] ?? token[8]
-    });
+    if (token[9]) {
+      [value, tokenizer.lastIndex] = readFunctionArgument(
+        normalizedSelector,
+        tokenizer.lastIndex
+      );
+      if (name !== "has" && name !== "not") {
+        throwSelectorSyntaxError(selector);
+      }
+      if (name === "has" && insideHas) throwSelectorSyntaxError(selector);
+      parseSelector(value, insideHas || name === "has", name === "has");
+    } else if (type === MATCHER_PSEUDO) {
+      throwSelectorSyntaxError(selector);
+    }
+    part.matchers.push({ type, name, value });
+    consumed = tokenizer.lastIndex;
+  }
+  if (consumed !== normalizedSelector.length || part.matchers.length === 0) {
+    throwSelectorSyntaxError(selector);
   }
   return parts;
 }
 function matchesSelector(element, selector) {
   const parsed = parseSelector(selector);
-  let part;
-  while (part = parsed.pop()) {
-    if (!matchesSelectorPart(element, part)) return false;
-  }
-  return true;
+  return parsed[0]?.matchers.length ? matchesSelectorRecursive(element, parsed) : false;
 }
-function walkNodesForSelector(node, parts, callback) {
-  if (isElementNode(node)) {
-    if (matchesSelectorRecursive(node, parts)) {
-      if (callback(node) === false) return false;
-    }
-    const child = node[CHILD];
-    if (child && walkNodesForSelector(child, parts, callback) === false) {
+function matchesRelativeSelector(scope, selector) {
+  const parts = parseSelector(selector, true, true);
+  const first = parts[0];
+  if (parts.length === 1 && first.matchers.length === 0) return false;
+  let leadingCombinator = COMBINATOR_DESCENDANT;
+  const scopeMatcher = { type: MATCHER_SCOPE, name: ":scope" };
+  if (first.matchers.length === 0) {
+    leadingCombinator = first.combinator;
+    first.matchers.push(scopeMatcher);
+  } else {
+    parts.unshift({
+      combinator: COMBINATOR_DESCENDANT,
+      matchers: [scopeMatcher]
+    });
+  }
+  if (parts.some(({ matchers }) => matchers.length === 0)) return false;
+  const root = leadingCombinator === COMBINATOR_ADJACENT || leadingCombinator === COMBINATOR_SIBLING ? scope[NEXT] : scope[CHILD];
+  if (!root) return false;
+  let matched = false;
+  walkNodesForSelector(
+    root,
+    parts,
+    () => {
+      matched = true;
       return false;
+    },
+    scope
+  );
+  return matched;
+}
+function walkNodesForSelector(node, parts, callback, scope) {
+  const pendingSiblings = [];
+  let current = node;
+  while (current) {
+    if (isElementNode(current)) {
+      if (matchesSelectorRecursive(current, parts, scope)) {
+        if (callback(current) === false) return false;
+      }
+      const child = current[CHILD];
+      if (child) {
+        const sibling = current[NEXT];
+        if (sibling) pendingSiblings.push(sibling);
+        current = child;
+        continue;
+      }
     }
-  }
-  const next = node[NEXT];
-  if (next && walkNodesForSelector(next, parts, callback) === false) {
-    return false;
+    current = current[NEXT] ?? pendingSiblings.pop() ?? null;
   }
   return true;
 }
-function matchesSelectorRecursive(element, parts) {
+function matchesSelectorRecursive(element, parts, scope) {
   const { combinator, matchers } = parts[parts.length - 1];
-  if (combinator === 4 /* Inner */) {
-    if (!matchesSelectorMatcher(element, matchers)) return false;
+  if (combinator === COMBINATOR_INNER) {
+    if (!matchesSelectorMatcher(element, matchers, scope)) return false;
     const pp = parts.slice(0, -1);
-    return pp.length === 0 || matchesSelectorRecursive(element, pp);
+    return pp.length === 0 || matchesSelectorRecursive(element, pp, scope);
   }
-  const link = combinator === 1 /* Child */ || combinator === 0 /* Descendant */ ? PARENT : PREV;
+  const link = combinator === COMBINATOR_CHILD || combinator === COMBINATOR_DESCENDANT ? PARENT : PREV;
   let ref = element[link];
   if (!ref) return false;
-  if (combinator === 0 /* Descendant */ || combinator === 2 /* Sibling */) {
+  if (combinator === COMBINATOR_DESCENDANT || combinator === COMBINATOR_SIBLING) {
     while (ref) {
-      if (isElementNode(ref) && matchesSelectorMatcher(ref, matchers)) {
+      if (isElementNode(ref) && matchesSelectorMatcher(ref, matchers, scope)) {
         const pp = parts.slice(0, -1);
         if (pp.length === 0) return true;
-        if (matchesSelectorRecursive(element, pp)) return true;
+        if (matchesSelectorRecursive(ref, pp, scope)) return true;
       }
       ref = ref[link];
     }
     return false;
   } else {
-    if (combinator === 3 /* Adjacent */ && !isElementNode(ref)) {
+    if (combinator === COMBINATOR_ADJACENT && !isElementNode(ref)) {
       while (ref && !isElementNode(ref)) {
         ref = ref[link];
       }
       if (!ref) return false;
     }
-    if (!isElementNode(ref) || !matchesSelectorMatcher(ref, matchers)) {
+    if (!isElementNode(ref) || !matchesSelectorMatcher(ref, matchers, scope)) {
       return false;
     }
     const pp = parts.slice(0, -1);
-    return pp.length === 0 || matchesSelectorRecursive(element, pp);
+    return pp.length === 0 || matchesSelectorRecursive(ref, pp, scope);
   }
 }
-function matchesSelectorPart(element, { combinator, matchers }) {
-  if (combinator === 4 /* Inner */) {
-    return matchesSelectorMatcher(element, matchers);
-  }
-  const link = combinator === 1 /* Child */ || combinator === 0 /* Descendant */ ? PARENT : PREV;
-  let ref = element[link];
-  if (!ref) return false;
-  if (combinator === 3 /* Adjacent */ && !isElementNode(ref)) {
-    while (ref && !isElementNode(ref)) {
-      ref = ref[link];
-    }
-    if (!ref) return false;
-  }
-  if (!isElementNode(ref) || !matchesSelectorMatcher(ref, matchers)) {
-    return false;
-  }
-  if (combinator === 0 /* Descendant */ || combinator === 2 /* Sibling */) {
-    while (ref = ref[link]) {
-      if (isElementNode(ref) && matchesSelectorMatcher(ref, matchers))
-        return true;
-    }
-  }
-  return true;
+function getSelectorAttribute(element, name) {
+  return element.getAttributeNS(
+    null,
+    element.namespaceURI === HTML_NAMESPACE ? asciiLowercase(name) : name
+  );
 }
-function matchesSelectorMatcher(element, matcher) {
+function matchesSelectorMatcher(element, matcher, scope) {
   if (!element) return false;
   if (Array.isArray(matcher)) {
     for (const single of matcher) {
-      if (matchesSelectorMatcher(element, single) === false) return false;
+      if (matchesSelectorMatcher(element, single, scope) === false) {
+        return false;
+      }
     }
     return true;
   }
   const { type, name, value } = matcher;
   switch (type) {
-    case 0 /* Unknown */:
+    case MATCHER_UNKNOWN:
       return name === "*";
     // Universal selector
-    case 1 /* Element */:
-      return element.localName === name;
-    case 2 /* Id */:
-      return element.getAttribute("id") === name;
-    case 3 /* Class */:
-      const classAttr = element.getAttribute("class");
+    case MATCHER_ELEMENT:
+      return element.namespaceURI === HTML_NAMESPACE ? element.localName === asciiLowercase(name) : element.localName === name;
+    case MATCHER_ID:
+      return getSelectorAttribute(element, "id") === name;
+    case MATCHER_CLASS:
+      const classAttr = getSelectorAttribute(element, "class");
       if (!classAttr) return false;
-      return classAttr.split(/\s+/).includes(name);
-    case 4 /* Attribute */:
-      return value == null ? element.hasAttribute(name) : element.getAttribute(name) === value;
-    case 5 /* Pseudo */:
-      switch (name) {
-        default:
-          throw Error(`Pseudo :${name} not implemented`);
-      }
-    case 6 /* Function */:
+      return splitOnASCIIWhitespace(classAttr).includes(name);
+    case MATCHER_ATTRIBUTE:
+      const attribute = getSelectorAttribute(element, name);
+      return value == null ? attribute != null : attribute === value;
+    case MATCHER_SCOPE:
+      return element === scope;
+    case MATCHER_PSEUDO:
+      throwSelectorSyntaxError(`:${name}`);
+    case MATCHER_FUNCTION:
       switch (name) {
         case "has":
-          return matchesSelector(element, value || "");
+          return matchesRelativeSelector(element, value || "");
         case "not":
           return !matchesSelector(element, value || "");
         default:
-          throw Error(`Function :${name}(${value}) not implemented`);
+          throwSelectorSyntaxError(`:${name}(${value})`);
       }
   }
   return false;
 }
 
-export { parseSelector, querySelector, querySelectorAll };
+export { COMBINATOR_ADJACENT, COMBINATOR_CHILD, COMBINATOR_DESCENDANT, COMBINATOR_INNER, COMBINATOR_SIBLING, MATCHER_ATTRIBUTE, MATCHER_CLASS, MATCHER_ELEMENT, MATCHER_FUNCTION, MATCHER_ID, MATCHER_PSEUDO, MATCHER_SCOPE, MATCHER_UNKNOWN, parseSelector, querySelector, querySelectorAll };

package/build/esnext/serialization.esnext

@@ -1,76 +1,199 @@
-import { CHILD, NEXT, NodeType, DATA, NAME, ATTRIBUTES, VALUE } from './constants.esnext';
+import { CHILD, asciiLowercase, NS, SVG_NAMESPACE, HTML_NAMESPACE, CREATE_ELEMENT, NAME, NEXT, NODE_TYPE_COMMENT, DATA, NODE_TYPE_TEXT, NODE_TYPE_ELEMENT, ATTRIBUTES, VALUE, CONTENT } from './constants.esnext';
 
-const elementTokenizer = /(?:<([a-z][a-z0-9-:]*)((?:[\s]+[^<>'"=\s]+(?:=(['"])[^]*?\3|=[^>'"\s]*|))*)[\s]*(\/?)\s*>|<\/([a-z][a-z0-9-:]*)>|<!--(.*?)-->|([^&<>]+))/gi;
-const attributeTokenizer = /\s([^<>'"=\n\s]+)(?:=(["'])([\s\S]*?)\2|=([^>'"\n\s]*)|)/g;
+const CHARACTER_REFERENCES = {
+  amp: "&",
+  AMP: "&",
+  apos: "'",
+  gt: ">",
+  GT: ">",
+  lt: "<",
+  LT: "<",
+  quot: '"',
+  QUOT: '"'
+};
+const VOID_ELEMENTS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+const ELEMENT_TOKENIZER = /(?:<([a-z][a-z0-9-:]*)((?:[\s]+[^<>'"=/\s]+(?:=(['"])[^]*?\3|=[^>'"\s]*|))*)[\s]*(\/?)\s*>|<\/([a-z][a-z0-9-:]*)>|<!--(.*?)-->|([^<>]+))/gi;
+const ATTRIBUTE_TOKENIZER = /\s([^<>'"=/\n\s]+)(?:=(["'])([\s\S]*?)\2|=([^>'"\n\s]*)|)/g;
+const SVG_HTML_BREAKOUTS = "|b|big|blockquote|body|br|center|code|dd|div|dl|dt|em|embed|h1|h2|h3|h4|h5|h6|head|hr|i|img|li|listing|menu|meta|nobr|ol|p|pre|ruby|s|small|span|strong|strike|sub|sup|table|tt|u|ul|var|";
+const SVG_HTML_FONT_ATTRIBUTE = /^(?:color|face|size)$/i;
+function decodeCharacterReferences(value) {
+  return value.replace(
+    /&(?:(amp|AMP|apos|gt|GT|lt|LT|quot|QUOT)|#(\d+)|#[xX]([\da-fA-F]+));/g,
+    (reference, name, decimal, hexadecimal) => {
+      if (name) return CHARACTER_REFERENCES[name];
+      const codePoint = Number.parseInt(
+        decimal ?? hexadecimal,
+        decimal ? 10 : 16
+      );
+      try {
+        return String.fromCodePoint(codePoint);
+      } catch {
+        return reference;
+      }
+    }
+  );
+}
+function isVoidElement(element) {
+  return element.namespaceURI === HTML_NAMESPACE && VOID_ELEMENTS.has(element.localName);
+}
+function isHtmlIntegrationPoint(element) {
+  const name = element.localName;
+  return element[NS] === SVG_NAMESPACE && (name === "foreignObject" || name === "desc" || name === "title");
+}
+function isSvgHtmlBreakout(tag, attributes) {
+  if (SVG_HTML_BREAKOUTS.includes(`|${tag}|`)) return true;
+  if (tag !== "font") return false;
+  for (const attribute of attributes.matchAll(ATTRIBUTE_TOKENIZER)) {
+    if (SVG_HTML_FONT_ATTRIBUTE.test(attribute[1])) return true;
+  }
+  return false;
+}
 function parseHtml(html, contextNode) {
   const document = contextNode.ownerDocument;
   const root = document.createDocumentFragment();
-  const stack = [root];
+  const stack = [];
   let parent = root;
-  let token;
-  elementTokenizer.lastIndex = 0;
-  while (token = elementTokenizer.exec(html)) {
+  for (const token of html.matchAll(ELEMENT_TOKENIZER)) {
     const tag = token[1];
     if (tag) {
-      const node = document.createElement(tag);
       const attrs = token[2];
-      attributeTokenizer.lastIndex = 0;
-      let t;
-      while (t = attributeTokenizer.exec(attrs)) {
-        node.setAttribute(t[1], t[3] || t[4] || "");
+      const normalizedTag = asciiLowercase(tag);
+      const openElement = stack[stack.length - 1]?.element ?? contextNode;
+      let namespace = openElement[NS] === SVG_NAMESPACE ? SVG_NAMESPACE : HTML_NAMESPACE;
+      if (normalizedTag === "svg") {
+        namespace = SVG_NAMESPACE;
+      } else if (namespace === SVG_NAMESPACE) {
+        if (isHtmlIntegrationPoint(openElement)) {
+          namespace = HTML_NAMESPACE;
+        } else if (isSvgHtmlBreakout(normalizedTag, attrs)) {
+          while (stack.length > 0) {
+            const frame = stack[stack.length - 1];
+            if (frame.element[NS] !== SVG_NAMESPACE || isHtmlIntegrationPoint(frame.element)) {
+              break;
+            }
+            stack.pop();
+            parent = frame.target;
+          }
+          namespace = HTML_NAMESPACE;
+        }
+      }
+      const name = namespace === HTML_NAMESPACE ? normalizedTag : tag;
+      const node = document[CREATE_ELEMENT](name, namespace, null, name);
+      for (const attribute of attrs.matchAll(ATTRIBUTE_TOKENIZER)) {
+        node.setAttribute(
+          attribute[1],
+          decodeCharacterReferences(attribute[3] || attribute[4] || "")
+        );
       }
       parent.append(node);
-      stack.push(parent);
-      parent = node;
+      if (isVoidElement(node) || namespace !== HTML_NAMESPACE && token[4]) {
+        continue;
+      }
+      stack.push({ element: node, target: parent });
+      parent = namespace === HTML_NAMESPACE && normalizedTag === "template" ? node.content : node;
     } else if (token[5]) {
-      parent = stack.pop() || root;
+      const closingTag = asciiLowercase(token[5]);
+      for (let index = stack.length - 1; index >= 0; index--) {
+        const frame = stack[index];
+        const frameName = asciiLowercase(frame.element[NAME]);
+        if (frameName === closingTag) {
+          parent = frame.target;
+          stack.length = index;
+          break;
+        }
+        if (frame.element[NS] === HTML_NAMESPACE && frameName === "template") {
+          break;
+        }
+      }
     } else if (token[6]) {
       parent.append(document.createComment(token[6]));
     } else {
-      parent.append(token[7]);
+      parent.append(decodeCharacterReferences(token[7]));
     }
   }
   return root;
 }
 function serializeChildren(parentNode) {
-  let out = "";
-  let child = parentNode[CHILD];
-  while (child) {
-    out += serializeNode(child);
-    child = child[NEXT];
-  }
-  return out;
+  return serialize([{ type: "content", child: parentNode[CHILD] }]);
 }
 function serializeNode(node) {
-  switch (node.nodeType) {
-    case NodeType.ELEMENT_NODE: {
-      const el = node;
-      let out = `<${el[NAME]}`;
-      let attr = el[ATTRIBUTES]?.[CHILD];
-      while (attr) {
-        out += ` ${attr[NAME]}`;
-        let value = attr[VALUE];
-        if (value !== "") {
-          value = String(value).replace(/&/g, "&amp;").replace(/"/g, "&quot;");
-          out += `="${value}"`;
+  return serialize([{ type: "opening", node }]);
+}
+function serialize(workItems) {
+  const chunks = [];
+  let workItem;
+  while (workItem = workItems.pop()) {
+    switch (workItem.type) {
+      case "opening": {
+        const node = workItem.node;
+        switch (node.nodeType) {
+          case NODE_TYPE_ELEMENT: {
+            const el = node;
+            chunks.push(`<${el[NAME]}`);
+            let attr = el[ATTRIBUTES]?.[CHILD];
+            while (attr) {
+              chunks.push(` ${attr[NAME]}`);
+              let value = attr[VALUE];
+              if (value !== "") {
+                value = String(value).replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+                chunks.push(`="${value}"`);
+              }
+              attr = attr[NEXT];
+            }
+            chunks.push(">");
+            if (isVoidElement(el)) break;
+            const content = el.namespaceURI === HTML_NAMESPACE && el.localName === "template" ? el[CONTENT] : el;
+            workItems.push({ type: "closing", name: el[NAME] });
+            workItems.push({
+              type: "content",
+              child: content?.[CHILD] ?? null
+            });
+            break;
+          }
+          case NODE_TYPE_TEXT: {
+            const text = node;
+            chunks.push(
+              text[DATA].replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+            );
+            break;
+          }
+          case NODE_TYPE_COMMENT: {
+            const text = node;
+            chunks.push(`<!--${text[DATA]}-->`);
+            break;
+          }
         }
-        attr = attr[NEXT];
+        break;
       }
-      out += ">";
-      out += serializeChildren(el);
-      out += `</${el[NAME]}>`;
-      return out;
-    }
-    case NodeType.TEXT_NODE: {
-      const text = node;
-      return text[DATA].replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-    }
-    case NodeType.COMMENT_NODE: {
-      const text = node;
-      return `<!--${text[DATA]}-->`;
+      case "content": {
+        const child = workItem.child;
+        if (child) {
+          workItems.push({ type: "content", child: child[NEXT] });
+          workItems.push({ type: "opening", node: child });
+        }
+        break;
+      }
+      case "closing":
+        chunks.push(`</${workItem.name}>`);
+        break;
     }
   }
-  return "";
+  return chunks.join("");
 }
 
 export { parseHtml, serializeChildren, serializeNode };