Lit结合Vaadin-dialog：如何在Web应用中访问对话框元素？

不用DOM遍历的方式，完全通过Lit的响应式状态和绑定来处理输入值，既符合Web Components封装原则，也更稳定易维护：

1. 用响应式状态管理输入值 #

先在组件里定义响应式属性，把输入框的值和这个属性绑定，不用手动查DOM：

import { LitElement, html, state, property } from 'lit';
import { customElement } from 'lit/decorators.js';
import { dialogRenderer, dialogFooterRenderer } from '@vaadin/dialog/lit.js';

class Settings {
  user_id = '';
}

@customElement('my-settings-dialog')
export class MySettingsDialog extends LitElement {
  // 可选：从外部接收初始值
  @property()
  initialUserId = '';

  @state()
  private dialogOpened = false;
  // 用这个状态绑定输入框的值
  @state()
  private userId = '';

  open() {
    this.dialogOpened = true;
    // 打开对话框时同步初始值
    this.userId = this.initialUserId;
  }

  private _close_settings() {
    this.dialogOpened = false;
  }

2. 绑定输入框并处理确定逻辑 #

修改对话框内容渲染方法，用双向绑定关联输入框和状态，点击确定时直接读取状态值：

private renderDialog = () => html`
    <div class="settings-dialog">
      <label for="userid">User-Id</label>
      <input 
        name="userid" 
        id="userid" 
        type="text" 
        .value=${this.userId}
        @input=${(e: InputEvent) => this.userId = (e.target as HTMLInputElement).value}
      >
    </div>
  `;

  private renderFooter = () => html`
    <button @click=${this._apply_settings}>确定</button>
    <button @click=${this._close_settings}>取消</button>
  `;

  private _apply_settings() {
    const settings = new Settings();
    // 直接拿响应式状态的值，不用DOM查询
    settings.user_id = this.userId;
    // 可以触发自定义事件把结果传给父组件
    this.dispatchEvent(new CustomEvent('settings-applied', { detail: settings }));
    this._close_settings();
  }

3. 简化绑定（可选） #

Lit 2+支持bind指令，可以进一步简化双向绑定代码，先导入指令：

import { bind } from 'lit/directives/bind.js';

然后修改输入框的绑定：

private renderDialog = () => html`
  <div class="settings-dialog">
    <label for="userid">User-Id</label>
    <input 
      name="userid" 
      id="userid" 
      type="text" 
      ${bind(this, 'userId')}
    >
  </div>
`;

为什么你的原方法不规范？ #

• 依赖DOM层级遍历，一旦Vaadin Dialog的内部结构更新，代码直接失效
• 违反Web Components封装原则，直接操作子组件内部DOM
• 代码可读性、可维护性差

完整组件代码 #

import { LitElement, html, state, property } from 'lit';
import { customElement } from 'lit/decorators.js';
import { dialogRenderer, dialogFooterRenderer } from '@vaadin/dialog/lit.js';
import { bind } from 'lit/directives/bind.js';

class Settings {
  user_id = '';
}

@customElement('my-settings-dialog')
export class MySettingsDialog extends LitElement {
  @property()
  initialUserId = '';

  @state()
  private dialogOpened = false;

  @state()
  private userId = '';

  open() {
    this.dialogOpened = true;
    this.userId = this.initialUserId;
  }

  private _close_settings() {
    this.dialogOpened = false;
  }

  private _apply_settings() {
    const settings = new Settings();
    settings.user_id = this.userId;
    this.dispatchEvent(new CustomEvent('settings-applied', { detail: settings }));
    this._close_settings();
  }

  private renderDialog = () => html`
    <div class="settings-dialog">
      <label for="userid">User-Id</label>
      <input 
        name="userid" 
        id="userid" 
        type="text" 
        ${bind(this, 'userId')}
      >
    </div>
  `;

  private renderFooter = () => html`
    <button @click=${this._apply_settings}>确定</button>
    <button @click=${this._close_settings}>取消</button>
  `;

  render() {
    return html`
      <vaadin-dialog
        header-title="settings"
        .opened=${this.dialogOpened}
        ${dialogRenderer(this.renderDialog, [this.userId])}
        ${dialogFooterRenderer(this.renderFooter, [])}
      ></vaadin-dialog>
    `;
  }
}

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