Fix implementations with broken template.clone/importNode

Author: Steven Orvell

src/Template/Template.js

@@ -9,25 +9,39 @@
  */
 
 // minimal template polyfill
-if (typeof HTMLTemplateElement === 'undefined') {
-  (function() {
+(function() {
+  var needsTemplate = (typeof HTMLTemplateElement === 'undefined');
+
+  // returns true if nested templates can be cloned (they cannot be on 
+  // some impl's like Safari 8)
+  var needsCloning = (function() {
+    if (!needsTemplate) {
+      var t = document.createElement('template');
+      t.innerHTML = '<div></div>';
+      var clone = t.cloneNode(true);
+      return (clone.content.childNodes.length === 0);
+    }
+  })();
+
+  var TEMPLATE_TAG = 'template';
+  var TemplateImpl = function() {};
 
-    var TEMPLATE_TAG = 'template';
+  if (needsTemplate) {
 
     var contentDoc = document.implementation.createHTMLDocument('template');
     var canDecorate = true;
 
     /**
       Provides a minimal shim for the <template> element.
     */
-    HTMLTemplateElement = function() {};
-    HTMLTemplateElement.prototype = Object.create(HTMLElement.prototype);
+    
+    TemplateImpl.prototype = Object.create(HTMLElement.prototype);
 
     /**
       The `decorate` method moves element children to the template's `content`.
       NOTE: there is no support for dynamically adding elements to templates.
     */
-    HTMLTemplateElement.decorate = function(template) {
+    TemplateImpl.decorate = function(template) {
       // if the template is decorated, return fast
       if (template.content) {
         return;
@@ -51,7 +65,7 @@ if (typeof HTMLTemplateElement === 'undefined') {
             },
             set: function(text) {
               contentDoc.body.innerHTML = text;
-              HTMLTemplateElement.bootstrap(contentDoc);
+              TemplateImpl.bootstrap(contentDoc);
               while (this.content.firstChild) {
                 this.content.removeChild(this.content.firstChild);
               }
@@ -63,22 +77,73 @@ if (typeof HTMLTemplateElement === 'undefined') {
           });
 
           template.cloneNode = function(deep) {
-            return HTMLTemplateElement.cloneNode(this, deep);
+            return TemplateImpl.cloneNode(this, deep);
           };
 
         } catch (err) {
           canDecorate = false;
         }
       }
       // bootstrap recursively
-      HTMLTemplateElement.bootstrap(template.content);
+      TemplateImpl.bootstrap(template.content);
+    };
+
+    /**
+      The `bootstrap` method is called automatically and "fixes" all
+      <template> elements in the document referenced by the `doc` argument.
+    */
+    TemplateImpl.bootstrap = function(doc) {
+      var templates = doc.querySelectorAll(TEMPLATE_TAG);
+      for (var i=0, l=templates.length, t; (i<l) && (t=templates[i]); i++) {
+        TemplateImpl.decorate(t);
+      }
     };
 
+    // auto-bootstrapping for main document
+    document.addEventListener('DOMContentLoaded', function() {
+      TemplateImpl.bootstrap(document);
+    });
+
+    // Patch document.createElement to ensure newly created templates have content
+    var createElement = document.createElement;
+    document.createElement = function() {
+      'use strict';
+      var el = createElement.apply(document, arguments);
+      if (el.localName == 'template') {
+        TemplateImpl.decorate(el);
+      }
+      return el;
+    };
+
+    var escapeDataRegExp = /[&\u00A0<>]/g;
+
+    function escapeReplace(c) {
+      switch (c) {
+        case '&':
+          return '&amp;';
+        case '<':
+          return '&lt;';
+        case '>':
+          return '&gt;';
+        case '\u00A0':
+          return '&nbsp;';
+      }
+    }
+
+    function escapeData(s) {
+      return s.replace(escapeDataRegExp, escapeReplace);
+    }
+  }
+
+  // make cloning/importing work!
+  if (needsTemplate || needsCloning) {
     var nativeCloneNode = Node.prototype.cloneNode;
 
-    HTMLTemplateElement.cloneNode = function(template, deep) {
+    TemplateImpl.cloneNode = function(template, deep) {
       var clone = nativeCloneNode.call(template);
-      this.decorate(clone);
+      if (this.decorate) {
+        this.decorate(clone);
+      }
       if (deep) {
         // NOTE: use native clone node to make sure CE's wrapped
         // cloneNode does not cause elements to upgrade.
@@ -90,13 +155,15 @@ if (typeof HTMLTemplateElement === 'undefined') {
       return clone;
     };
 
-    HTMLTemplateElement.fixClonedDom = function(clone, source) {
+    TemplateImpl.fixClonedDom = function(clone, source) {
       var s$ = source.querySelectorAll(TEMPLATE_TAG);
       var t$ = clone.querySelectorAll(TEMPLATE_TAG);
       for (var i=0, l=t$.length, t, s; i<l; i++) {
         s = s$[i];
         t = t$[i];
-        this.decorate(s);
+        if (this.decorate) {
+          this.decorate(s);
+        }
         t.parentNode.replaceChild(s.cloneNode(true), t);
       }
     };
@@ -106,69 +173,27 @@ if (typeof HTMLTemplateElement === 'undefined') {
     Node.prototype.cloneNode = function(deep) {
       var dom = nativeCloneNode.call(this, deep);
       if (deep) {
-        HTMLTemplateElement.fixClonedDom(dom, this);
+        TemplateImpl.fixClonedDom(dom, this);
       }
       return dom;
     };
 
     // clone instead of importing <template>
     document.importNode = function(element, deep) {
       if (element.localName === TEMPLATE_TAG) {
-        return HTMLTemplateElement.cloneNode(element, deep);
+        return TemplateImpl.cloneNode(element, deep);
       } else {
         var dom = originalImportNode.call(document, element, deep);
         if (deep) {
-          HTMLTemplateElement.fixClonedDom(dom, element);
+          TemplateImpl.fixClonedDom(dom, element);
         }
         return dom;
       }
     };
+  }
 
-    /**
-      The `bootstrap` method is called automatically and "fixes" all
-      <template> elements in the document referenced by the `doc` argument.
-    */
-    HTMLTemplateElement.bootstrap = function(doc) {
-      var templates = doc.querySelectorAll(TEMPLATE_TAG);
-      for (var i=0, l=templates.length, t; (i<l) && (t=templates[i]); i++) {
-        HTMLTemplateElement.decorate(t);
-      }
-    };
-
-    // auto-bootstrapping for main document
-    document.addEventListener('DOMContentLoaded', function() {
-      HTMLTemplateElement.bootstrap(document);
-    });
-
-    // Patch document.createElement to ensure newly created templates have content
-    var createElement = document.createElement;
-    document.createElement = function() {
-      'use strict';
-      var el = createElement.apply(document, arguments);
-      if (el.localName == 'template') {
-        HTMLTemplateElement.decorate(el);
-      }
-      return el;
-    };
-
-    var escapeDataRegExp = /[&\u00A0<>]/g;
-
-    function escapeReplace(c) {
-      switch (c) {
-        case '&':
-          return '&amp;';
-        case '<':
-          return '&lt;';
-        case '>':
-          return '&gt;';
-        case '\u00A0':
-          return '&nbsp;';
-      }
-    }
-
-    function escapeData(s) {
-      return s.replace(escapeDataRegExp, escapeReplace);
-    }
+  if (needsTemplate) {
+    HTMLTemplateElement = TemplateImpl;
+  }
 
-  })();
-}
+})();