renderedCallback invoked excessively for light DOM components

[nolanlawson]

Description

Consider this tree (note these are slotted components, not child components):

<x-grandparent>
  <x-parent>
    <x-child></x-child>
  </x-parent>
</x-grandparent>

For native shadow with synthetic lifecycle, native shadow with native lifecycle, and synthetic shadow, the renderedCallbacks are invoked once per component. However, for light DOM, the renderedCallback for both the <x-grandparent> and <x-parent> components are invoked twice each.

Steps to Reproduce

See StackBlitz links above.

Expected Results

One renderedCallback per component.

Actual Results

Multiple per component.

Full results

Native shadow, synthetic lifecycle

Component	Lifecycle hook
grandparent	connectedCallback
parent	connectedCallback
child	connectedCallback
child	renderedCallback
parent	renderedCallback
grandparent	renderedCallback
grandparent	disconnectedCallback
parent	disconnectedCallback
child	disconnectedCallback

Native shadow, native lifecycle

Component	Lifecycle hook
grandparent	connectedCallback
grandparent	renderedCallback
parent	connectedCallback
parent	renderedCallback
child	connectedCallback
child	renderedCallback
grandparent	disconnectedCallback
parent	disconnectedCallback
child	disconnectedCallback

Synthetic shadow

Component	Lifecycle hook
grandparent	connectedCallback
grandparent	renderedCallback
parent	connectedCallback
parent	renderedCallback
child	connectedCallback
child	renderedCallback
grandparent	disconnectedCallback
parent	disconnectedCallback
child	disconnectedCallback

Light DOM

Component	Lifecycle hook
grandparent	connectedCallback
parent	connectedCallback
child	connectedCallback
child	renderedCallback
parent	renderedCallback
grandparent	renderedCallback
parent	renderedCallback
grandparent	renderedCallback
grandparent	disconnectedCallback
parent	disconnectedCallback
child	disconnectedCallback

[nolanlawson]

Marking this as "up for grabs" even though it may be tricky to implement due to backwards compatibility concerns. (I.e. someone could be relying on renderedCallback being executed multiple times – we've definitely seen this kind of thing before.)

The proper solution should:

1. Ensure that each component only executes its renderedCallback once
2. Have a sensible ordering. Native shadow, native lifecycle and Synthetic shadow are identical, so I would align on that.
3. Use api-versioning.ts so that this is only enabled for the most recent API version. Otherwise we run the risk of breaking existing consumers.