StencilJS中stateChanged自定义事件未被my-component监听问题排查

这个问题的核心在于Stencil自定义事件的默认行为和组件层级/Shadow DOM的事件传递规则，具体原因拆解如下：

1. 自定义事件默认不冒泡 #

Stencil中@Event()装饰器创建的事件，默认是**不冒泡（bubbles: false）**的。你的control-comp是父组件，my-component是它的子组件，父组件发出的事件不会主动向下传递给子组件，也不会向上冒泡到DOM树的更高层级（除非手动配置冒泡）。

2. Shadow DOM的事件隔离 #

你的my-component开启了shadow: true，这意味着它的DOM结构被Shadow DOM隔离了。即使父组件的事件允许冒泡，默认情况下也无法穿透Shadow DOM边界，子组件内部的@Listen监听器无法捕获到外部DOM元素发出的事件，除非事件配置了composed: true。

3. 监听器的监听目标问题 #

my-component里的@Listen('stateChanged')默认是监听自身元素上的stateChanged事件，而stateChanged是从control-comp元素发出的，两者是父子组件关系，子组件不会自动接收父组件的非冒泡事件。

解决方案 #

根据你的业务场景，有两种可行的解决方式：

方式一：修改事件配置，让事件可冒泡并穿透Shadow DOM #

在control-comp中修改@Event装饰器的配置，允许事件冒泡并穿透Shadow DOM：

// control-comp 组件代码
@Event({ bubbles: true, composed: true }) stateChanged: EventEmitter;

同时，在my-component中调整监听器，指定监听目标为document（因为冒泡后的事件会到达document层级，而Shadow DOM允许composed: true的事件进入）：

// my-component 组件代码
@Listen('stateChanged', { target: 'document' }) stateChangedHandler(state) {
  console.log('Received', state);
}

方式二：使用Props传递状态（更推荐） #

Stencil遵循单向数据流原则，父组件向子组件传递状态更适合用Props，而不是事件（事件通常用于子组件向父组件传递消息）。你可以直接在control-comp的render方法中，把stateData作为Props传递给my-component：

// control-comp 组件的render方法修改
{index.map( (i) => {
  return <my-component 
    first={i.toString()} 
    last="Don't call me a framework" 
    width={i*40} 
    height={i*40}
    stateData={this.stateData} // 传递状态
  ></my-component>
})}
<my-component 
  first={this.stateData["name"]} 
  last="'Don't call me a framework' JS"
  stateData={this.stateData} // 传递状态
></my-component>

然后在my-component中添加对应的Prop，并监听Prop变化：

// my-component 组件代码
@Prop() stateData: object;

// 使用@Watch监听Prop变化
@Watch('stateData')
onStateDataChanged(newState) {
  console.log('Received state via prop:', newState);
}

这种方式更符合Stencil的设计理念，也避免了事件传递的各种边界问题。

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