Make sure <template> polyfill runs before custom elements

Fixes Polymer/polymer-cli#856
webcomponents · Oct 18, 2017 · 936a28b · 936a28b
1 parent 7905fc5
commit 936a28b
Show file tree

Hide file tree

Showing 11 changed files with 169 additions and 176 deletions.
diff --git a/src/post-polyfill.js b/src/post-polyfill.js
@@ -12,6 +12,8 @@
 
 let customElements = window['customElements'];
 let HTMLImports = window['HTMLImports'];
+let Template = window['HTMLTemplateElement'];
+
 // global for (1) existence means `WebComponentsReady` will file,
 // (2) WebComponents.ready == true means event has fired.
 window.WebComponents = window.WebComponents || {};
@@ -22,6 +24,10 @@ if (customElements && customElements['polyfillWrapFlushCallback']) {
   let flushCallback;
   let runAndClearCallback = function runAndClearCallback() {
     if (flushCallback) {
+      // make sure to run the HTMLTemplateElement polyfill before custom elements upgrade
+      if (Template['bootstrap']) {
+        Template['bootstrap'](window.document);
+      }
       let cb = flushCallback;
       flushCallback = null;
       cb();

diff --git a/tests/template-and-CE.html b/tests/template-and-CE.html
@@ -11,8 +11,7 @@
 <html>
   <head>
     <title>Template with HTMLImports Test</title>
-    <script src="../node_modules/@webcomponents/template/template.js"></script>
-    <script src="../node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
+    <script src="../webcomponents-loader.js"></script>
     <script src="../../web-component-tester/browser.js"></script>
   </head>
   <body>
@@ -51,12 +50,8 @@
         }
       }
 
-      // The template polyfill is asynchronous, so on IE11 we shouldn't
-      // try to upgrade before it's done its thing.
-      document.addEventListener('DOMContentLoaded', function() {
-        window.customElements.define('x-child', XChild);
-        window.customElements.define('x-after', XAfter);
-      });
+      window.customElements.define('x-child', XChild);
+      window.customElements.define('x-after', XAfter);
 
       suite('template and custom elements', function() {
         test('elements within templates not upgraded', function() {

diff --git a/tests/template-and-imports.html b/tests/template-and-imports.html
@@ -11,15 +11,7 @@
 <html>
   <head>
     <title>Template with HTMLImports Test</title>
-    <script src="../../template/template.js"></script>
-    <script src="../../html-imports/src/html-imports.js"></script>
-    <script>
-      // WCT = {
-      //   waitFor: function(callback) {
-      //     this.HTMLImports.whenReady(callback);
-      //   }
-      // };
-    </script>
+    <script src="../webcomponents-loader.js"></script>
     <script src="../../web-component-tester/browser.js"></script>
   </head>
   <body>

diff --git a/webcomponents-hi-ce.js b/webcomponents-hi-ce.js
diff --git a/webcomponents-hi-ce.js.map b/webcomponents-hi-ce.js.map
diff --git a/webcomponents-hi-sd-ce.js b/webcomponents-hi-sd-ce.js
diff --git a/webcomponents-hi-sd-ce.js.map b/webcomponents-hi-sd-ce.js.map
diff --git a/webcomponents-hi.js b/webcomponents-hi.js