如何获取故事书以获取自定义事件答案

【问题标题】：How to get storybook to pick up custom events如何获取故事书以获取自定义事件
【发布时间】：2021-11-13 22:58:49
【问题描述】：

我有一个使用 ShadowDOM 的输入 Web 组件，内部结构简单：

<custom-input id="foobar">
  ::shadow
    <div id="input-root" class="label-north">
      <label for="input">Labeltext</label>
      <input id="input" type="text" />
    </div>
  ::endshadow
</custom-input>

每当发生本机 change 事件时，我都会将本机 change 事件替换为自定义 state-changed 事件，该事件在 event.detail 有效负载中报告组件状态。本次活动有composed: true和bubbles: true。

如何让这个自定义事件对象显示在 Storybook 的 actions 部分？

我试过这样：

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

但是当我更改输入值时，actions 中没有显示任何内容。

【问题讨论】：

标签： storybook

【解决方案1】：

我终于找到了问题的原因：

我的 Web 组件会检查它是否有 id，因为这是 event.detail 有效负载的核心部分。如果不存在，我停止发出state-change，而是发出console.warn("Component cannot meaningfully report its state change as no id is present.", this)。

由于此警告没有出现在控制台中（可能是因为它是在 iframe 中发出的？），所以我没有意识到这个问题。

一旦我给所有组件一个 id 它确实可以按照问题中的描述工作。

【讨论】：