Lit组件Property Expression更新异常：render调用正确但.checked未同步

问题场景 #

使用Lit开发的复选框组件，通过.checked=${this.selected}绑定属性，期望每次点击复选框后将selected重置为false，但实际DOM中复选框的选中状态会在true和false之间交替。调试时发现render()已执行且selected值为false，但复选框的原生checked状态仍为true。

复现代码如下：

组件代码 #

import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  @property()
  selected = false;

  render() {
    return html`<input type="checkbox" 
        .checked=${this.selected}
        @change=${this.handleChange} />`;
  }
  
  handleChange(e) {   
    this.selected = e.target.checked;
    this.dispatchEvent(new Event("change"));
  }
}

HTML代码 #

<simple-greeting></simple-greeting>

<script>
  const chk = document.querySelector("simple-greeting");
  chk.addEventListener("change", () => {
    console.log(chk.selected);
    chk.selected = false;
  });
</script>

核心原因 #

问题出在事件处理时序与Lit异步更新机制的冲突：

1. 用户点击复选框时，浏览器会同步修改复选框的原生checked状态为true，随后触发change事件。
2. 组件内部handleChange同步将selected设为true，Lit标记组件需要更新（加入微任务队列）。
3. 组件触发自定义change事件，外部监听同步将selected设为false，Lit再次标记更新。
4. Lit会合并同一事件循环中的多次属性变更，最终以selected=false执行更新，但此时浏览器的原生复选框状态更新流程尚未完全结束。
5. 在当前事件循环的微任务阶段，Lit尝试将复选框.checked设为false，但部分情况下，浏览器的原生UI同步更新会覆盖这次设置，导致DOM状态与组件属性不一致。

而requestAnimationFrame能解决问题，是因为它将属性修改推迟到**下一帧（宏任务）**执行，此时当前事件循环的所有同步操作已完成，浏览器原生状态更新也已结束，Lit的DOM更新就能正常生效。

解决方案 #

方案1：延迟属性修改（推荐） #

在外部监听中使用requestAnimationFrame推迟属性修改，避开当前事件循环的冲突：

chk.addEventListener("change", () => {
  console.log(chk.selected);
  requestAnimationFrame(() => {
    chk.selected = false;
  });
});

方案2：组件内部直接处理重置逻辑 #

将重置逻辑放在组件内部，避免外部同步修改带来的时序问题：

handleChange(e) {   
  // 直接重置为false，无需先同步原生状态
  this.selected = false;
  this.dispatchEvent(new Event("change"));
}

方案3：强制立即更新（不推荐） #

如果必须在外部同步修改，可以调用performUpdate()强制组件立即执行更新，但这会破坏Lit的异步更新优化：

chk.addEventListener("change", () => {
  console.log(chk.selected);
  chk.selected = false;
  chk.performUpdate(); // 强制立即更新DOM
});

内容的提问来源于stack exchange，提问作者Luke Vo