Web Components的Storybook：如何通过按钮动态修改组件参数？

我有一个modal组件，正在为它编写Storybook故事，当前代码如下：

import { Story, Meta } from '@storybook/html';

export default {
  title: 'Components/Modal',
  argTypes: {
    open: {
      name: 'Opened',
      control: 'boolean'
    },
  },
  args: {
    open: false,
  }
} as Meta;

const Template: Story = (args) => {
  return `
    <my-modal open="${args.open}">
      Some example content inside the modal
    </my-modal>
  `;
};

export const Modal: Story = Template.bind({});

目前我可通过控制面板的open参数切换模态框显示，但希望在故事中添加按钮，点击后触发模态框显示。我在当前版本的Web Components版Storybook中找不到实现方法。我了解到React中可使用import { useArgs } from '@storybook/api';钩子动态修改参数值，但不清楚Web Components场景下该如何实现？

在Web Components版的Storybook中，同样可以使用useArgs钩子实现参数的动态更新，结合DOM操作添加触发按钮即可完成需求，具体实现如下：

1. 首先导入useArgs钩子：

import { Story, Meta } from '@storybook/html';
import { useArgs } from '@storybook/api';

2. 修改Template函数，通过DOM创建元素并绑定点击事件，同步更新Storybook的args：

const Template: Story = (args) => {
  // 获取更新args的方法
  const [_, updateArgs] = useArgs();

  // 创建容器元素
  const container = document.createElement('div');

  // 创建触发按钮
  const toggleBtn = document.createElement('button');
  toggleBtn.textContent = 'Toggle Modal';
  toggleBtn.addEventListener('click', () => {
    // 切换open状态并更新args
    updateArgs({ open: !args.open });
  });

  // 创建模态框组件
  const modal = document.createElement('my-modal');
  modal.setAttribute('open', args.open.toString());
  modal.innerHTML = 'Some example content inside the modal';

  // 将按钮和模态框添加到容器
  container.appendChild(toggleBtn);
  container.appendChild(modal);

  return container;
};

3. 保持原有导出的故事不变：

export const Modal: Story = Template.bind({});

完成后，点击故事中的按钮会同步更新Storybook控制面板的open参数，同时触发模态框的显示/隐藏状态切换，实现控制面板与故事内按钮的联动。

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