Merge pull request #447 from webcomponents/targeted-template-upgrade

Upgrade templates when performing the CustomElements treewalk

Author: Steve Orvell

src/CustomElements/observe.js

@@ -306,18 +306,12 @@ if (originalCreateShadowRoot) {
   };
 }
 
-function upgradeAll(doc) {
-  if (HTMLTemplateElement && HTMLTemplateElement.bootstrap) {
-    HTMLTemplateElement.bootstrap(doc);
-  }
-  addedNode(doc);
-}
 // exports
 scope.watchShadow = watchShadow;
 scope.upgradeDocumentTree = upgradeDocumentTree;
 scope.upgradeDocument = upgradeDocument;
 scope.upgradeSubtree = addedSubtree;
-scope.upgradeAll = upgradeAll;
+scope.upgradeAll = addedNode;
 scope.attached = attached;
 scope.takeRecords = takeRecords;
 

src/CustomElements/upgrade.js

@@ -33,6 +33,12 @@ var flags = scope.flags;
  */
 // Upgrade a node if it can be upgraded and is not already.
 function upgrade(node, isAttached) {
+  // upgrade template elements before custom elements
+  if (node.localName === 'template') {
+    if (window.HTMLTemplateElement && HTMLTemplateElement.decorate) {
+      HTMLTemplateElement.decorate(node);
+    }
+  }
   if (!node.__upgraded__ && (node.nodeType === Node.ELEMENT_NODE)) {
     var is = node.getAttribute('is');
     // find definition first by localName and secondarily by is attribute

src/Template/Template.js

@@ -28,9 +28,11 @@ if (typeof HTMLTemplateElement === 'undefined') {
       NOTE: there is no support for dynamically adding elements to templates.
     */
     HTMLTemplateElement.decorate = function(template) {
-      if (!template.content) {
-        template.content = contentDoc.createDocumentFragment();
+      // if the template is decorated, return fast
+      if (template.content) {
+        return;
       }
+      template.content = contentDoc.createDocumentFragment();
       var child;
       while (child = template.firstChild) {
         template.content.appendChild(child);
@@ -63,6 +65,9 @@ if (typeof HTMLTemplateElement === 'undefined') {
           canDecorate = false;
         }
       }
+
+      // bootstrap recursively
+      HTMLTemplateElement.bootstrap(template.content);
     };
 
     /**

wct.conf.json

@@ -1,3 +1,6 @@
 {
-  "suites": ["tests/runner.html"]
+  "suites": ["tests/runner.html"],
+  "clientOptions": {
+    "environmentImports": []
+  }
 }