手动修改Input后LitElement属性变更组件未更新问题

问题重现 #

编写了一个带dt属性的Lit组件，外部通过按钮修改属性时，input能正常显示新值；但手动修改input内容后，再点击按钮更新属性，控制台能看到dt属性已更新，input却不再显示新值。

问题原因 #

这是Lit单向数据流的特性导致的：

• 初始渲染时，input的显示值由组件dt属性控制。
• 用户手动修改input后，浏览器会直接更新DOM的value状态，此时组件属性和DOM状态脱节。
• Lit的DOM diff算法会检测到DOM的value已经和模板中的值不一致（被用户修改过），为了避免覆盖用户输入，默认不会主动更新DOM。

解决方案 #

场景1：完全受控组件（推荐） #

让input的值始终和组件属性保持同步，用户输入会同步到属性，外部修改属性也会同步到input。

修改cmp.ts代码：

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

@customElement('cmp-tmp')
export class CmpTmp extends LitElement {
  
  @property({ type: Number })
  dt = 0;

  // 同步用户输入到组件属性
  private onInput(e: InputEvent) {
    const input = e.target as HTMLInputElement;
    this.dt = Number(input.value);
  }

  render() {
    // 使用 .value 绑定DOM属性，而非HTML属性
    return html`<input .value=${this.dt} @input=${this.onInput}>`;
  }
}

关键说明：

• 用.value=${this.dt}替代value=${this.dt}：前者直接操作DOM的value属性，后者是设置HTML的value属性，用户修改后两者会出现不一致。
• 监听@input事件，把用户输入同步到组件的dt属性，保证属性和DOM状态始终一致，外部修改属性时，input会自动更新。

场景2：仅外部更新时强制同步（半受控） #

如果不需要同步用户输入到组件属性，只需要在外部修改dt时强制更新input显示，可以利用Lit的updated生命周期钩子：

修改cmp.ts代码：

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

@customElement('cmp-tmp')
export class CmpTmp extends LitElement {
  
  @property({ type: Number })
  dt = 0;

  // 属性更新后手动同步DOM
  updated(changedProps: Map<string, unknown>) {
    if (changedProps.has('dt')) {
      const input = this.shadowRoot?.querySelector('input') as HTMLInputElement;
      if (input) {
        input.value = String(this.dt);
      }
    }
  }

  render() {
    return html`<input value=${this.dt}>`;
  }
}

关键说明：

• updated钩子会在组件属性变化后触发，在这里手动找到input元素，强制设置它的value为最新的dt值，覆盖用户修改后的内容。

内容的提问来源于stack exchange，提问作者Pavel K