Lit-element v3.2.0自定义事件无法实现子组件向父组件传值

• 方法命名冲突：form-input组件中自定义的事件派发方法和HTMLElement原生提供的dispatchEventAPI重名，方法内部调用this.dispatchEvent时会递归触发自身，直接导致调用栈溢出，自定义事件根本无法正常发出。
• 自定义事件配置缺失：Web Components中通过CustomEvent创建的事件默认bubbles为false（不向上冒泡）、composed为false（无法穿过Shadow DOM边界），父组件绑定在<form-input>标签上的事件监听器根本捕获不到子组件内部发出的事件。

1. 修改form-input组件中事件处理方法的命名，避开原生API名，比如将原dispatchEvent方法改名为handleInput
2. 初始化CustomEvent时添加bubbles: true和composed: true配置，让事件可以正常冒泡穿过Shadow DOM边界
3. （可选优化）原生input的value绑定建议使用Lit的属性绑定语法.value=${this.value}，替代原有的attribute绑定，避免值被强制序列化为字符串的问题

修复后的form-input.js核心代码如下：

// 原重名的dispatchEvent方法改名为handleInput
handleInput(e) {
    const target = e.target
    if (target) {
        this.dispatchEvent(
            new CustomEvent('new-value', {
                detail: target.value,
                bubbles: true,
                composed: true
            })
        )
    }
}

render() {
    return html`
        <div>
            <label for=${this.fieldName}>${this.label}</label>
            <input
                @input=${this.handleInput}
                id=${this.fieldName}
                name=${this.fieldName}
                placeholder=${this.placeholder}
                type=${this.type || 'text'}
                .value=${this.value}
            />
        </div>
    `
}

form-container组件的逻辑不需要额外修改，修复后父组件的updateInputValue方法就可以正常接收到子组件传递的值，更新inputValue属性。

• 先确认事件触发逻辑是否正常执行：在子组件的输入事件回调中打日志，同时观察控制台有没有调用栈溢出之类的报错，优先排查命名冲突、语法错误
• 跨Shadow DOM传递自定义事件时，必须同时配置bubbles: true和composed: true，二者缺一个都会导致父组件无法监听到事件
• 不要在自定义组件类中定义和原生DOM API同名的方法（比如dispatchEvent/addEventListener/getAttribute等），否则会覆盖原生实现导致不可预期的错误
• 如果父组件的回调方法完全不触发，优先排查事件冒泡、穿透配置；如果回调触发了但属性更新异常，再排查回调内的this指向、传值逻辑

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