LitElement不更新列表中的复选框

Question

我有一个简单的清单，其中每个项目都有一个删除按钮。当我检查第一个项目然后将其删除时，列表会更新，删除该项目，但会选中下一个项目的复选框。下一项的属性正确。这是我的代码：import { LitElement, html } from 'lit-element';class CheckList extends LitElement {  static get properties() {    return {      items: { type: Array },    };  }  constructor() {    super();    this.items = [      {        id: 1,        text: 'Item 1',        isDone: false,      },      {        id: 2,        text: 'Item 2',        isDone: false,      },    ];    this.toggleCheck = this.toggleCheck.bind(this);    this.deleteItem = this.deleteItem.bind(this);  }  render() {    return html`      <ul>        ${this.items.map(item => html`          <li>            <input              type="checkbox"              value=${item.id}              ?checked=${item.isDone}              @click=${this.toggleCheck}            >            ${item.text}            <button @click=${this.deleteItem}>X</button>          </li>        `)}      </ul>    `;  }  toggleCheck(e) {    const id = Number(e.target.value);    this.items = this.items.map(item => {      if (item.id === id) {        item.isDone = !item.isDone;      }      return item;    });  }  deleteItem(e) {    const id = Number(e.target.parentNode.querySelector('input').value);    this.items = this.items.filter(item => item.id !== id);  }}customElements.define('check-list', CheckList);https://stackblitz.com/edit/typescript-fylwxb