conditional stubbing of HTMLImports

webcomponents-loader.js

@@ -11,39 +11,31 @@
 (function() {
   // Feature detect which polyfill needs to be imported.
   let polyfills = [];
-  let useNativeImports = ('import' in document.createElement('link'));
-  if (!useNativeImports) {
-    polyfills.push('hi');
-  }
-
-  // Stub out HTMLImports if we're using native imports
-  window.HTMLImports = {
-    useNative: useNativeImports,
-    whenReady: function(callback) {
-      if (useNativeImports) {
+  if ('import' in document.createElement('link')) {
+    // Stub out HTMLImports if we're using native imports.
+    window.HTMLImports = {
+      useNative: true,
+      importForElement: function(el) {
+        return el.ownerDocument !== document ? el.ownerDocument : null;
+      },
+      whenReady: function(callback) {
         // When native imports boot, the are "ready" the first rAF after
         // the document becomes interactive, so wait for the correct state change.
-        if (document.readyState !== 'interactive') {
-          function once() {
+        if (document.readyState === 'loading') {
+          document.addEventListener('readystatechange', function once() {
             document.removeEventListener('readystatechange', once);
-            window.HTMLImports.whenReady(callback);
-          }
-          document.addEventListener('readystatechange', once);
-        } else {
-          // TODO(sorvell): Ideally `whenReady` should return synchronously
-          // when imports are not pending but this would require a more
-          // robust implementation that should probably be a small complementary
-          // library available via the html-imports polyfill.
-          requestAnimationFrame(function() {
-            callback();
+            HTMLImports.whenReady(callback);
           });
+        } else if (document.readyState === 'interactive') {
+          requestAnimationFrame(callback);
+        } else {
+          callback();
         }
-      } else {
-        window.addEventListener('HTMLImportsLoaded', callback);
       }
-    }
-  };
-
+    };
+  } else {
+    polyfills.push('hi');
+  }
   if (!('attachShadow' in Element.prototype) || (window.ShadyDOM && window.ShadyDOM.force)) {
     polyfills.push('sd');
   }
@@ -59,12 +51,7 @@
   // https://github.com/webcomponents/shadycss/issues/46.
   if (!polyfills.length) {
     polyfills.push('none');
-    HTMLImports.whenReady(function() {
-      requestAnimationFrame(function() {
-        window.dispatchEvent(new CustomEvent('WebComponentsReady'));
-      })
-    });
-  } else if (polyfills.length === 4) {  // hi-ce-sd-pf is actually called lite.
+  } else if (polyfills.length === 4) { // hi-ce-sd-pf is actually called lite.
     polyfills = ['lite'];
   }
 
@@ -73,8 +60,19 @@
     let newScript = document.createElement('script');
     // Load it from the right place.
     var url = script.src.replace(
-        'webcomponents-loader.js', `webcomponents-${polyfills.join('-')}.js`);
+      'webcomponents-loader.js', `webcomponents-${polyfills.join('-')}.js`);
     newScript.src = url;
     document.head.appendChild(newScript);
   }
-})();
+  // Ensure `WebComponentsReady` is fired also when there are no polyfills loaded.
+  // TODO(valdrin): only check for `!polyfills.length` once 'none' bundle
+  // is removed. Addressing this is blocked on
+  // https://github.com/webcomponents/shadycss/issues/46.
+  if (polyfills[0] === 'none') {
+    HTMLImports.whenReady(function() {
+      requestAnimationFrame(function() {
+        window.dispatchEvent(new CustomEvent('WebComponentsReady'));
+      });
+    });
+  }
+})();