fix(html-template-element): fix template.content.cloneNode

where native support is missing fix aurelia/templating#569
aurelia · Oct 13, 2017 · 964fde7 · 964fde7
1 parent f151cf1
commit 964fde7
Showing 1 changed file with 47 additions and 1 deletion.
diff --git a/src/html-template-element.js b/src/html-template-element.js
@@ -36,10 +36,55 @@ if (typeof FEATURE_NO_IE === 'undefined') {
     return template;
   }
 
+  // replaces a #document-fragment .cloneNode
+  function safeCloneNode(deep) {
+    const clone = this.standardCloneNode(deep);
+    if (deep) {
+      const clonedTemplates = clone.querySelectorAll('template');
+      let i = clonedTemplates.length;
+      while (i--) {
+        clonedTemplates.item(i).content = this.__templates.item(i).content;
+      }
+    }
+    return clone;
+  }
+
+  // replaces a #document-fragment .cloneNode, temporarily
+  // delaying the this.querySelectorAll call till first use
+  function lazySafeCloneNode(deep) {
+    if (!deep) {
+      return this.standardCloneNode(deep);
+    }
+    const childTemplates = this.querySelectorAll('template');
+    if (!childTemplates.length) {
+      this.cloneNode = this.standardCloneNode;
+      this.standardCloneNode = undefined;
+    } else {
+      this.__templates = childTemplates;
+      this.cloneNode = safeCloneNode;
+    }
+    return this.cloneNode(deep);
+  }
+
+  function lazyFixTemplateContent(content) {
+    if (content.__safeToCloneNode) { return; }
+    content.standardCloneNode = content.cloneNode;
+    content.cloneNode = lazySafeCloneNode;
+    content.__safeToCloneNode = true;
+  }
+
   function fixHTMLTemplateElementRoot(template) {
     let content = fixHTMLTemplateElement(template).content;
     let childTemplates = content.querySelectorAll('template');
 
+    if (childTemplates.length) {
+      content.__templates = childTemplates;
+      content.standardCloneNode = content.cloneNode;
+      content.cloneNode = safeCloneNode;
+    }
+
+    content.__safeToCloneNode = true;
+
     for (let i = 0, ii = childTemplates.length; i < ii; ++i) {
       let child = childTemplates[i];
 
@@ -48,12 +93,13 @@ if (typeof FEATURE_NO_IE === 'undefined') {
       } else {
         fixHTMLTemplateElement(child);
       }
+      lazyFixTemplateContent(child.content);
     }
 
     return template;
   }
 
-  if (!_FEATURE.htmlTemplateElement) {  
+  if (!_FEATURE.htmlTemplateElement) {
     _FEATURE.ensureHTMLTemplateElement = fixHTMLTemplateElementRoot;
   }
 }