Lit change-in-update warnings from many components

[medmunds]

Describe the bug

When running in dev mode, many wa-* components cause Lit to warn about "scheduled an update after an update completed" when first rendered.

The equivalent Shoelace components did not issue this warning.

To Reproduce

Steps to reproduce the behavior:

1. Create a custom LitElement that renders some Web Awesome components, e.g., wa-button
2. Run a development server and view your project
3. Examine the browser console:

Results:

Element wa-button 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: did not generally occur with Shoelace. (There were some specific component/property value combos that could cause that warning, but not just rendering components in the initial state.)

Demo

Here's a codepen that loads Lit in dev mode and renders wa-button and sl-button side by side. Notice the console output warns about wa-button but not sl-button.
https://codepen.io/mvedmunds/pen/azvWxYq?editors=0011

Screenshots

More information

At a minimum, these components are affected in 3.0.0.beta-4:

• wa-button
• wa-card
• wa-checkbox
• wa-input
• wa-radio
• wa-radio-group
• wa-select
• wa-slider

(I'm using lit@3.3.1, but saw the same warning with earlier versions.)

[claviska]

@KonnorRogers is dev mode not enabled in our development environment? 🤔

[KonnorRogers]

@claviska Nope. and its been this way since Shoelace. I can add it.

const config = {
  // ... other esbuild config
  conditions: ["development"]
}

https://esbuild.github.io/api/#conditions

https://lit.dev/docs/tools/development/#development-and-production-builds

[claviska]

Thanks, @KonnorRogers!

@medmunds We can look into optimizing the offending components, but I believe there were a handful that were legit and won't be suppressed.

I have no idea why dev mode has been disabled for so long 🙈

[KonnorRogers]

@claviska I think we turned it off because the output from Lit looks like this:

2025-08-07.14-30-34.mp4

[KonnorRogers]

I actually started a quick branch here:

#1284

that resolved about 99% of the update warnings.

(in the test suite theres a couple warnings, but I think they're related to test suite things triggering it rather than actual component code, would have to click around more to check)

i just need to figure out how to different the "exportConditions" in ESBuild so we ship production builds for CDN users and for our production site.

[medmunds]

I believe there were a handful that were legit and won't be suppressed

Lit has a documented way to suppress this warning for an individual component that legitimately needs update to retrigger an update:

WaComponentThatLegitReUpdates.disableWarning?.("change-in-update");

There's also an undocumented (but tested) way to suppress the "Lit is in dev mode" warning if it's muddying up your test results:

if (however.you.detect.TEST_MODE) {
  globalThis.litIssuedWarnings ??= new Set();
  globalThis.litIssuedWarnings!.add('dev-mode');
}

[claviska]

TIL; thanks for that, @medmunds!