diff --git a/‎src/lib/dom-module.html‎
Lines changed: 9 additions & 0 deletions b/‎src/lib/dom-module.html‎
Lines changed: 9 additions & 0 deletions
diff --git a/‎src/standard/utils.html‎
Lines changed: 34 additions & 0 deletions b/‎src/standard/utils.html‎
Lines changed: 34 additions & 0 deletions
@@ -95,6 +95,15 @@
   // loaded by this point. In addition the HTMLImports polyfill should be
   // changed to upgrade elements prior to running any scripts.)
   var cePolyfill = window.CustomElements && !CustomElements.useNative;
+  // NOTE: Under polyfilled CE/HI, if script and html are separate, then
+  // for dom modules to be found, script should be executed as follows:
+  //   HTMLImports.whenReady(function() {
+  //    CustomElements.ready = false;
+  //    // registrations
+  //    CustomElements.upgradeDocumentTree(document);
+  //    CustomElements.ready = true;
+  //  });
+  // TODO(sorvell): A webcomponentsjs method should be added for this.
   document.registerElement('dom-module', DomModule);
 
   function forceDomModulesUpgrade() {
 
@@ -9,6 +9,7 @@
 -->
 
 <link rel="import" href="../lib/async.html">
+<link rel="import" href="../lib/settings.html">
 <link rel="import" href="../lib/debounce.html">
 
 <script>
@@ -454,5 +455,38 @@
 
   });
 
+  /*
+    We patch importHref under the CE polyfill for 2 separate reasons:
+    (1) performance optimization: CE registrations upgrade the entire document
+    tree including imports. Therefore if an import is loaded every element 
+    registered will upgrade the entire doc tree. This is $ and is optimized 
+    via batching to occur once at startup (before WebComponentsReady). We
+    override importHref here so that we can batch upgrades until after the 
+    import has loded, leveraging the same batching optimization.
+    (2) the CE polyfill upgrades elements in HI in the wrong order. They upgrade
+    after all scripts in the import have run rather than being interleaved with 
+    them. Therefore, any script that depends on a previous custom element in 
+    the import will fail. By deferring upgrades until after async imports load
+    we reduce the chance of a problem because upgrade time dependencies are 
+    no longer an issue. (e.g. `dom-module` is a registration time dependency 
+    when `lazyRegister` is not used and it is specially handled in `dom-module`;
+    `custom-style` is an upgrade time dependency native css properties are used).
+
+  */
+  if (!Polymer.Settings.useNativeCustomElements) {
+    var importHref = Polymer.Base.importHref;
+    Polymer.Base.importHref = function(href, onload, onerror, optAsync) {
+      CustomElements.ready = false;
+      var loadFn = function(e) {
+        CustomElements.upgradeDocumentTree(document);
+        CustomElements.ready = true;
+        if (onload) {
+          return onload.call(this, e);
+        }
+      }
+      return importHref.call(this, href, loadFn, onerror, optAsync);
+    }
+  }
+
 })();
 </script>