Vaadin 23 Lit自定义组件表单字段读写问题咨询

问题原因 #

你之前的方法失效，核心是Shadow DOM的封装特性：

• window.customElements.get("my-custom-component")返回的是组件的构造函数，而非页面上的组件实例，自然读不到字段值；
• document.forms.MyForm.nome.value返回undefined，是因为表单及字段都在组件的Shadow DOM内部，外部document无法直接访问Shadow DOM内的元素。

推荐实现方式：组件内部处理（符合封装原则） #

在Lit组件类内部通过装饰器获取元素引用，绑定事件并完成字段读写，这是Vaadin+Lit的最佳实践。

代码示例 #

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

@customElement('my-custom-component')
export class MyCustomComponent extends LitElement {
  // 用@query装饰器获取Shadow DOM内的字段引用
  @query('#nome') nomeInput;
  @query('#target-field') targetField;

  render() {
    return html`
      <form id="MyForm">
        <!-- 字段A：触发事件的输入框 -->
        <input type="text" id="nome" @input=${this.handleInputChange}>
        <!-- 字段B：需要更新的目标字段 -->
        <input type="text" id="target-field">
        <!-- 文件上传组件 -->
        <vaadin-upload></vaadin-upload>
      </form>
    `;
  }

  // 事件处理函数：读取A、计算B、更新B
  handleInputChange() {
    // 1. 读取字段A的值
    const valueA = this.nomeInput.value;
    // 2. 计算值B（示例：转为大写，可替换为你的业务逻辑）
    const valueB = valueA.toUpperCase();
    // 3. 更新字段B的value属性
    this.targetField.value = valueB;
  }
}

特殊场景：外部JS需访问组件字段（不推荐，破坏封装） #

如果必须从外部脚本操作组件内部字段，可通过以下两种方式：

方式1：组件暴露公共方法 #

在组件类中添加读写字段的公共方法，外部通过组件实例调用：

// 组件类内新增方法
getFieldAValue() {
  return this.nomeInput.value;
}

setFieldBValue(value) {
  this.targetField.value = value;
}

外部JS调用：

// 获取组件实例
const customComp = document.querySelector('my-custom-component');
// 读取字段A
const valA = customComp.getFieldAValue();
// 计算值B
const valB = valA + '_processed';
// 更新字段B
customComp.setFieldBValue(valB);

方式2：直接访问Shadow DOM（不推荐，依赖内部结构） #

通过组件实例的shadowRoot直接访问内部元素，缺点是组件内部DOM结构变更时，外部代码会失效：

const customComp = document.querySelector('my-custom-component');
// 读取字段A
const valA = customComp.shadowRoot.querySelector('#nome').value;
// 更新字段B
customComp.shadowRoot.querySelector('#target-field').value = valA.toUpperCase();

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