如何让故事书获取自定义事件

Question

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

<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 事件发生时，我都会用报告 event.detail 负载中的组件状态的自定义 state-changed 事件替换此本机 change 事件。此事件有 composed: true 和 bubbles: true.

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

我试过这样：

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

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

Answer 1

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

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

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

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

如何让故事书获取自定义事件

How to get storybook to pick up custom events

storybook