updateComplete should not resolve until the element has connected

[kevinpschaaf]

Description

If an element is created but not yet connected, and no property has been set to enqueue an update, updateComplete currently resolves immediately (before the first render), rather than waiting until connection. However, if at least one property has been set, it will wait until connection before resolving. This is confusing and appears to be a bug.

Since an element will render unconditionally upon connection (regardless of whether it has properties that triggered rendering), the mental model should be that a newly constructed but disconnected element should be in a "pending update" state until it is connected. Hence updateComplete should not resolve until the element has first connected.

Live Demo

https://jsbin.com/jiquhez/edit?html,console,output

Steps to Reproduce

1. Open link above

Expected Results

Found 1 element // result of `getItems` before connection
Found 1 element // result of `getItems` after connection

Actual Results

Found 0 element` // result of `getItems` before connection
Found 1 element` // result of `getItems` after connection

Browsers Affected

• All

Versions

• lit-element: 2.0.1

[kevinpschaaf]

Referenced in https://stackoverflow.com/questions/54872823/how-to-check-the-initial-render-state-not-the-update-state-of-a-component-in