bug: Stenciljs 4.23.1 regression - classes list on child elements of html "dialog" tag is not always updated in html on prop change

[kievsash]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.23.1

Current Behavior

Reproduced: "@stencil/core": "4.23.1",
Not reproduced: "@stencil/core": "4.23.0",

If I show list in <dialog> {this.someList}</dialog> and some classes should be recalculated if list item prop changes - it doesnot always happen.
Initially selected marked with red item stays marked with red if I select other item in list (prop "selected" changes to false but class is not unassigned).

Here is gif with reproduce steps:

Expected Behavior

Items classes for list items inside element always be updated correctly.

System Info

npx stencil info

      System: node 18.20.5
    Platform: darwin (21.6.0)
   CPU Model: Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz (8 cpus)
    Compiler: /.../regression-reproduce-repo/node_modules/@stencil/core/compiler/stencil.js
       Build: 1736187268
     Stencil: 4.23.1 🌯
  TypeScript: 5.5.4
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1

Steps to Reproduce

Reproduce repo: https://github.com/kievsash/stencil-4-dialog-bug-reproduce

Just npm i, npm start and check list behaviour when you select another item - previously selected item stays with selected background.

Here is gif with reproduce steps:

Code Reproduction URL

https://github.com/kievsash/stencil-4-dialog-bug-reproduce

Additional Information

Minimal code:

  render() {
    this.items.forEach((item: IItem) => {
      item.selected = this.selectedItems.includes(item.id);
    });

    const items: IItem[] = this.items.map((item: IItem) => (
      <app-dropdown-item
        label={item.label}
        selected={this.isSelected(item)}
        uid={item.id}
        onItemSelected={this.handleItemClick}
        key={String(item.id)}
      ></app-dropdown-item>
    ));

    return (
      <div class="dropdown" >
        <button onClick={() => this.toggleDropdown()}>
          Toggle Dropdown
        </button>
        <dialog open={this.isOpen}>
            <div class="dropdown-menu" slot="scroll-box" ref={(el) => (this.selectableListElement = el)}>
              {items}
            </div>
        </dialog>

      </div>
    );
  }

Whole reproduce repo: https://github.com/kievsash/stencil-4-dialog-bug-reproduce

[christian-bromann]

@johnjenkins Do you think this may be related to changes made in #6082 ?

[johnjenkins]

yes - I've found the issue.
Fix in-bound :)

(It's the same issue as #6114)

[kievsash]

Thanks guys
You are fast like a Sonic )

[christian-bromann]

A fix for this has been released today as part of Stencil v4.25.1!