Fix #104 - Use document.importNode instead of just cloneNode

WebReflection · WebReflection · commit e7a8e721be68 · 2024-01-20T21:17:59.000+01:00
diff --git a/esm/creator.js b/esm/creator.js
@@ -21,7 +21,7 @@ export default parse => (
    */
   (template, values) => {
     const { a: fragment, b: entries, c: direct } = parse(template, values);
-    const root = fragment.cloneNode(true);
+    const root = document.importNode(fragment, true);
     /** @type {import("./literals.js").Detail[]} */
     let details = empty;
     if (entries !== empty) {
diff --git a/esm/dom/document.js b/esm/dom/document.js
@@ -115,6 +115,17 @@ export default class Document extends Parent {
     return new TreeWalker(parent, accept);
   }
 
+  /**
+   * Same as `document.importNode`
+   * @template T
+   * @param {T} externalNode
+   * @param {boolean} deep
+   * @returns {T}
+   */
+  importNode(externalNode, deep = false) {
+    return externalNode.cloneNode(deep);
+  }
+
   toString() {
     return this[childNodes].join('');
   }
diff --git a/test/custom-element.html b/test/custom-element.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>uhtml</title>
+  <script type="module">
+    import { render, html } from '../index.js';
+
+    customElements.define('c-e', class extends HTMLElement {
+      #stuff;
+      get stuff() { return this.#stuff }
+      set stuff(value) { this.#stuff = value }
+      connectedCallback() {
+        this.textContent = this.#stuff;
+      }
+    });
+
+    render(document.body, html`<c-e .stuff=${'OK'} />`);
+  </script>
+</head>
+</html>
