如何实现Lit组件向引用方传递事件，支持原生HTML事件绑定用法

要实现上层调用方可以监听组件内部事件，你只需要在组件内部的事件处理逻辑中，主动向外派发带composed和bubbles配置的自定义事件即可，具体实现如下：

核心修改点 #

你需要调整组件内的handleEvent方法，在内部处理完逻辑后，向组件外派发可穿透Shadow DOM的事件：

handleEvent(e) {
  // 先同步组件内部的checked属性
  this.checked = e.target.checked;
  // 向外派发change事件
  this.dispatchEvent(new CustomEvent('change', {
    // 向外传递的数据，上层可通过e.detail读取
    detail: {
      checked: this.checked,
      originEvent: e
    },
    // 允许事件冒泡
    bubbles: true,
    // 允许事件穿越Shadow DOM边界，这是Lit组件向外暴露事件的关键配置
    composed: true
  }));
  console.log(`Checkbox marked as: ${this.checked}`);
}

上层调用方的两种使用方式 #

1. 行内on事件写法（和你预期的原生HTML用法一致） #

<script>
function handleMyElementChange(e) {
  console.log('上层拿到的选中状态：', e.detail.checked);
}
</script>
<!-- 注意这里事件参数固定写event -->
<my-element onchange="handleMyElementChange(event)"></my-element>

2. addEventListener 写法 #

const myElement = document.querySelector('my-element');
myElement.addEventListener('change', (e) => {
  console.log('选中状态：', e.detail.checked);
});

注意事项 #

• 如果担心自定义的change事件和原生事件冲突，可以将事件名改为业务专属名称，比如checked-update，对应的上层监听就改为onchecked-update或者addEventListener('checked-update', ...)即可
• 所有需要传递给上层的参数都可以放在CustomEvent的detail字段中，符合Web Components自定义事件的规范

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