[reactive-element] asynchrony between shadowRoot creation and initial update can be problematic

Which package(s) are affected?

Lit Core (lit / lit-html / lit-element / reactive-element)

Description

ReactveElement calls createRenderRoot synchronously in connectedCallback which creates an empty shadowRoot by default. The initial update typically renders DOM into this shadowRoot is performed asynchronously, by default at microtask timing.

This creates a period of time which is less than a paint by default, in which an element's children will not render since they are inside an empty shadowRoot. In practice this is almost never problematic, but it is the precipitating issue for https://github.com/lit/lit/issues/4786. A focused element can become unfocused.

In addition, Lit allows updates to be scheduled at user defined timing by implementing scheduleUpdate. If this is done such that a paint can occur between updates, the empty shadowRoot can cause a detectable layout change (shown here with a ResizeObserver).

Reproduction

https://lit.dev/playground/#gist=3ecd7930758e2355dd3089e726e00d6d

Workaround

Forcing the initial update to be synchronous avoids this behavior:

connectedCallback() {
  super.connectedCallback();    
  if (!this.hasUpdated) {
    this.performUpdate();
  }
}

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

Lit 3.x

Browser/OS/Node environment

All