如何让Storybook识别自定义事件并在actions面板中正常展示

Storybook 默认的 actions.handles 全局事件委托逻辑，对ShadowDOM下冒泡的自定义事件匹配逻辑存在兼容问题，没有正确捕获到从web组件内部发出的事件。

方案1：指定事件绑定的元素选择器 #

修改handles配置，在事件名后加你的自定义组件标签选择器，明确指定监听该组件上触发的事件：

parameters: {
  actions: {
    handles: ['state-changed custom-input'],
  },
},

如果你的组件有特定ID或类名，也可以替换选择器为对应值，比如state-changed #foobar。

方案2：通过argTypes显式绑定action #

如果是Storybook 6.0+版本，直接在story的argTypes中配置事件绑定，无需依赖全局委托：

import { action } from '@storybook/addon-actions'

export default {
  title: 'CustomInput',
  component: 'custom-input',
  argTypes: {
    'state-changed': {
      action: 'state-changed',
    },
  },
}

方案3：手动监听事件上报 #

如果上述配置都不生效，直接在渲染逻辑中手动给组件绑定事件监听，显式调用action上报：

export const Default = () => {
  const inputEl = document.createElement('custom-input')
  inputEl.addEventListener('state-changed', action('state-changed'))
  // 其余组件属性配置
  return inputEl
}

先在浏览器控制台执行以下代码，确认你的自定义事件配置正确，确实能冒泡到全局：

document.addEventListener('state-changed', (e) => {
  console.log('全局捕获到state-changed事件', e.detail)
})

如果控制台无输出，说明你的自定义事件composed或bubbles属性配置错误，或者事件触发逻辑存在问题，先修复组件本身的事件触发逻辑再配置Storybook。

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