bug: focus lost when element added to the right of an array

[KotlinIsland]

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

@stencil/[email protected]

Current Behavior

when a render occurs and an element is removed from the start of an array, and another element is added to the end. then the elements that don't change within the array lose focus. i think it's because they are removed from the dom, then added back

when clicking "show left":

when clicking "show right":

why are all the elements highlighted? only the newly added "right" element should be appeared

Expected Behavior

it doesn't lose focus

System Info

happens on chrome and firefox

      System: node 20.6.1
    Platform: windows (10.0.19045)
    Compiler: C:\Users\AMONGUS\projects\stencil-test\node_modules\@stencil\core\compiler\stencil.js
       Build: 1728498324
     Stencil: 4.22.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

run:

add some css so you can see the outline when focused:

button:focus {
  outline: 2px solid black;
}

import { Component, h, State } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
})
export class MyComponent {
  @State() add?: "left" | "right" = "left"
  render() {
    const button = (value: string, onclick?: () => void) => <button
      key={value} value={value} onClick={onclick}>{value}
    </button>

    return [
      this.add === "left" ? button("left") : null,
      button("show left", () => this.add = "left"),
      button("show right", () => this.add = "right"),
      this.add === "right" ? button("right") : null,
    ]
  }
}

Code Reproduction URL

see "Steps to Reproduce"

Additional Information

No response