Lit-based components show a warning on init [1 day]

[tomivirkki]

Description

Lit-based components show a warning on init with the latest version of Lit

Element vaadin-side-nav scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update. See https://lit.dev/msg/change-in-update for more information.

Expected outcome

There should not be a warning

Minimal reproducible example

Open a page with a Lit-based Vaadin component (side-nav, popover)

Steps to reproduce

See console

Environment

Vaadin version(s): 24

Browsers

Issue is not browser related

[web-padawan]

The main reason for this is that we store references to DOM elements in reactive properties to use them in observers.
Example: the _overlayElement defined in the OverlayClassMixin and set by vaadin-popover in firstUpdated():

web-components/packages/popover/src/vaadin-popover.js

Line 441 in 64f6da7

this._overlayElement = this.shadowRoot.querySelector('vaadin-popover-overlay');

So, immediately after initial render there is another update caused by setting this reference, which causes the warning.
Same applies to many cases of adding controllers in ready() e.g. TextFieldMixin and other field components.

I'd say this case generally falls into the following exception which is stated in the warning itself though:

the next update can only be scheduled as a side effect of the previous update