Stencil组件内联事件处理器如何传递事件对象并获取选中选项值

一、内联事件传递事件对象的正确方式 #

内联onClick中需要使用event作为参数名（而非自定义的e），浏览器内联事件的默认参数名就是event，修改后的代码如下：

<ifx-filter-input onClick="getValues(event)">
  <option>One</option>
  <option>On2e</option>
  <option>One3</option>
</ifx-filter-input>

二、获取选中选项值的两种方案 #

方案1：通过组件暴露自定义事件（推荐，符合Web组件设计规范） #

作为Stencil开发的组件，最合理的方式是让ifx-filter-input内部监听选择变化，主动向外派发包含选中值的自定义事件，避免外部直接穿透Shadow DOM操作内部元素。

组件内部实现示例：

import { Component, State, h } from '@stencil/core';

@Component({
  tag: 'ifx-filter-input',
  shadow: true,
})
export class IfxFilterInput {
  @State() selectedValue: string;

  private handleSelectChange(e: Event) {
    const selectEl = e.target as HTMLSelectElement;
    this.selectedValue = selectEl.value;
    // 派发自定义事件，外部可直接监听
    this.dispatchEvent(new CustomEvent('filter-select', {
      detail: {
        value: selectEl.value,
        text: selectEl.options[selectEl.selectedIndex].text
      },
      bubbles: true,
      composed: true
    }));
  }

  render() {
    return (
      <select onChange={this.handleSelectChange}>
        <slot></slot>
      </select>
    );
  }
}

外部使用时直接监听自定义事件：

<ifx-filter-input onfilter-select="handleFilterSelect(event)">
  <option value="one">One</option>
  <option value="on2e">On2e</option>
  <option value="one3">One3</option>
</ifx-filter-input>

<script>
function handleFilterSelect(event) {
  console.log('选中值:', event.detail.value);
  console.log('选中文本:', event.detail.text);
}
</script>

方案2：通过composedPath穿透Shadow DOM获取选中值（临时兼容方案） #

如果无法修改组件源码，可以利用event.composedPath()获取事件传播路径中的内部select元素，进而获取选中项：

function getValues(event) {
  // 从事件传播路径中找到内部的select元素
  const selectEl = event.composedPath().find(el => el.tagName === 'SELECT');
  if (selectEl) {
    // 获取选中值和文本
    const selectedIndex = selectEl.selectedIndex;
    const selectedOption = selectEl.options[selectedIndex];
    console.log('选中值:', selectedOption.value);
    console.log('选中文本:', selectedOption.text);
  }
}

注：event.target返回组件本身是因为Stencil默认启用Shadow DOM，事件会被封装，外部无法直接获取内部DOM元素，composedPath()可以拿到完整的事件传播路径。

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