Upgrade elements when they are created, even if their definition has not flushed.

bicknellr · bicknellr · commit 857b82cf885a · 2017-08-04T18:33:10.000-07:00
diff --git a/src/CustomElementRegistry.js b/src/CustomElementRegistry.js
@@ -120,6 +120,7 @@ export default class CustomElementRegistry {
       constructionStack: [],
     };
 
+    this._internals.setDefinition(localName, definition);
     this._pendingDefinitions.push(definition);
 
     // If we've already called the flush callback and it hasn't called back yet,
@@ -138,39 +139,58 @@ export default class CustomElementRegistry {
     this._flushPending = false;
 
     const pendingDefinitions = this._pendingDefinitions;
-    /** @type {!Map<string, !Array<!Element>>} */
-    const localNameToUpgradableElements = new Map();
+
+    /**
+     * Unupgraded elements with definitions that were defined *before* the last
+     * flush, in document order.
+     * @type {!Array<!Element>}
+     */
+    const elementsWithStableDefinitions = [];
+
+    /**
+     * A map from `localName`s of definitions that were defined *after* the last
+     * flush to unupgraded elements matching that definition, in document order.
+     * @type {!Map<string, !Array<!Element>>}
+     */
+    const elementsWithPendingDefinitions = new Map();
     for (let i = 0; i < pendingDefinitions.length; i++) {
-      localNameToUpgradableElements.set(pendingDefinitions[i].localName, []);
+      elementsWithPendingDefinitions.set(pendingDefinitions[i].localName, []);
     }
 
     this._internals.patchAndUpgradeTree(document, {
       upgrade: element => {
-        // Attempt to upgrade using *non-pending* definitions.
-        this._internals.upgradeElement(element);
-
-        // If the element was upgraded, then no pending definition applies to it.
+        // Ignore the element if it has already upgraded or failed to upgrade.
         if (element.__CE_state !== undefined) return;
 
+        const localName = element.localName;
+
         // If there is an applicable pending definition for the element, add the
-        // element to the set of upgradable elements for that definition.
-        let upgradableElements = localNameToUpgradableElements.get(element.localName);
-        if (upgradableElements) {
-          upgradableElements.push(element);
+        // element to the list of elements to be upgraded with that definition.
+        const pendingElements = elementsWithPendingDefinitions.get(localName);
+        if (pendingElements) {
+          pendingElements.push(element);
+        // If there is *any other* applicable definition for the element, add it
+        // to the list of elements with stable definitions that need to be upgraded.
+        } else if (this._internals.localNameToDefinition(localName)) {
+          elementsWithStableDefinitions.push(element);
         }
       },
     });
 
+    // Upgrade elements with 'stable' definitions first.
+    for (let i = 0; i < elementsWithStableDefinitions.length; i++) {
+      this._internals.upgradeElement(elementsWithStableDefinitions[i]);
+    }
+
+    // Upgrade elements with 'pending' definitions in the order they were defined.
     while (pendingDefinitions.length > 0) {
       const definition = pendingDefinitions.shift();
       const localName = definition.localName;
 
-      this._internals.setDefinition(localName, definition);
-
       // Attempt to upgrade all applicable elements.
-      const upgradableElements = localNameToUpgradableElements.get(definition.localName);
-      for (let i = 0; i < upgradableElements.length; i++) {
-        this._internals.upgradeElement(upgradableElements[i]);
+      const pendingUpgradableElements = elementsWithPendingDefinitions.get(definition.localName);
+      for (let i = 0; i < pendingUpgradableElements.length; i++) {
+        this._internals.upgradeElement(pendingUpgradableElements[i]);
       }
 
       // Resolve any promises created by `whenDefined` for the definition.
diff --git a/tests/html/polyfillWrapFlushCallback/imperativelyCreatedBeforeFlush.html b/tests/html/polyfillWrapFlushCallback/imperativelyCreatedBeforeFlush.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html>
+<head>
+<title>customElements#polyfillWrapFlushCallback</title>
+<script>
+  (window.customElements = window.customElements || {}).forcePolyfill = true;
+</script>
+<script src="../../../../es6-promise/dist/es6-promise.auto.min.js"></script>
+<script src="../../../../web-component-tester/browser.js"></script>
+<script src="../../../custom-elements.min.js"></script>
+</head>
+<body>
+  <script>
+  /**
+   * @license
+   * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+   * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+   * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+   * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+   * Code distributed by Google as part of the polymer project is also
+   * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+   */
+
+  test('Elements are upgraded when created imperatively, even if the flush ' +
+    'callback has not been called.', function() {
+      let flush = undefined;
+      customElements.polyfillWrapFlushCallback(fn => {
+        flush = fn;
+      });
+
+      class CustomElement0 extends HTMLElement {}
+      customElements.define('custom-element-0', CustomElement0);
+      assert.equal(customElements.get('custom-element-0'), CustomElement0);
+
+      const element = document.createElement('custom-element-0');
+      assert.instanceOf(element, CustomElement0);
+
+      flush();
+    });
+  </script>
+</body>
+</html>
diff --git a/tests/html/polyfillWrapFlushCallback/index.html b/tests/html/polyfillWrapFlushCallback/index.html
@@ -11,5 +11,6 @@
     './whenDefined_before.html',
     './whenDefined_after.html',
     './upgradeInDefineCallOrder.html',
+    './imperativelyCreatedBeforeFlush.html',
   ]);
 </script>
