Schedules requestUpdate in initialize rather than connectedCallback

Fixes #594. Ensures an early access of `updateComplete` will not complete before the element has first updated (at connection time).

Author: Steven Orvell

src/lib/updating-element.ts

@@ -441,6 +441,8 @@ export abstract class UpdatingElement extends HTMLElement {
    */
   protected initialize() {
     this._saveInstanceProperties();
+    // ensures first update will be caught by an early access of `updateComplete`
+    this.requestUpdate();
   }
 
   /**
@@ -484,15 +486,13 @@ export abstract class UpdatingElement extends HTMLElement {
 
   connectedCallback() {
     this._updateState = this._updateState | STATE_HAS_CONNECTED;
-    // Ensure connection triggers an update. Updates cannot complete before
+    // Ensure first connection completes an update. Updates cannot complete before
     // connection and if one is pending connection the `_hasConnectionResolver`
     // will exist. If so, resolve it to complete the update, otherwise
     // requestUpdate.
     if (this._hasConnectedResolver) {
       this._hasConnectedResolver();
       this._hasConnectedResolver = undefined;
-    } else {
-      this.requestUpdate();
     }
   }
 

src/test/lib/updating-element_test.ts

@@ -2202,11 +2202,6 @@ suite('UpdatingElement', () => {
 
       @property() foo = 5;
 
-      constructor() {
-        super();
-        this.requestUpdate();
-      }
-
       updated(_changedProperties: Map<PropertyKey, unknown>) {
         this.updatedCalledCount++;
       }
@@ -2219,4 +2214,27 @@ suite('UpdatingElement', () => {
     await a.updateComplete;
     assert.equal(a.updatedCalledCount, 1);
   });
+
+  test('early access of updateComplete waits until first update', async() => {
+    class A extends UpdatingElement {
+      didUpdate = false;
+
+      updated(_changedProperties: Map<PropertyKey, unknown>) {
+        this.didUpdate = true;
+      }
+    }
+    customElements.define(generateElementName(), A);
+    const a = new A();
+    let updated = false;
+    a.updateComplete.then(() => {
+      updated = true;
+      assert.isTrue(a.didUpdate);
+    });
+    await new Promise((r) => setTimeout(r, 20));
+    assert.isFalse(updated);
+    document.body.appendChild(a);
+    await a.updateComplete;
+    assert.isTrue(updated);
+    document.body.removeChild(a);
+  });
 });