Storybook 7.0+Lit 2.0：如何让Show Code显示组件属性？

问题出在你当前用的是Lit的属性绑定语法（.date=${args.date}这种带点的写法），而Storybook的「Show Code」默认识别的是标准HTML属性，没法解析Lit的属性绑定语法，所以只显示空的组件标签。

下面是两种可行的解决方法：

方法一：使用Storybook的argsToTemplate工具（推荐） #

Storybook为Web Components提供了argsToTemplate工具，能自动把story的args转换成对应的组件属性/属性绑定，同时让「Show Code」正确展示所有属性。

修改后的代码如下：

import { html } from "lit";
import type { Meta, StoryObj } from "@storybook/web-components";
// 导入argsToTemplate工具
import { argsToTemplate } from "@storybook/web-components";
import { DateFormatterProps } from ".";
import ".";

const Template = (args: DateFormatterProps) => {
  return html`
    <date-formatter ${argsToTemplate(args)}></date-formatter>
  `;
}

const meta: Meta<DateFormatterProps> = {
  title: "Date Formatter",
  tags: ['autodocs'],
  render: Template,
  parameters: {
    docs: {
      description: {
        component: "",
      },
    },
  },
  argTypes: {
    date: { control: "date",  description: "要格式化的日期，可以是Date对象或能被Date构造函数解析的字符串" },
    showHoursAndMinutes: { control: "boolean", description: "是否显示小时和分钟" },
    showDateOnly: { control: "boolean", description: "是否仅显示日期" },
    digitOnlyFormat: { control: "boolean", description: "是否仅使用数字格式" },
    showSeconds: { control: "boolean", description: "是否显示秒数" },
  }
};
export default meta;

type Story = StoryObj;
export const Default: Story = {
  args: {
    date: new Date(),
    showHoursAndMinutes: true,
    showDateOnly: false,
    digitOnlyFormat: false,
    showSeconds: false,
  }
};

方法二：手动将属性绑定转为HTML属性（仅适用于支持属性反射的组件） #

如果你的Lit组件已经配置了属性反射（比如用reflect: true在@property装饰器里），可以直接把属性绑定换成标准HTML属性写法：

const Template = (args: DateFormatterProps) => {
  return html`
    <date-formatter 
      date=${args.date.toISOString()}
      ?show-hours-and-minutes=${args.showHoursAndMinutes}
      ?show-date-only=${args.showDateOnly}
      ?digit-only-format=${args.digitOnlyFormat}
      ?show-seconds=${args.showSeconds}
      ></date-formatter>
  `;
}

这种方法需要注意：布尔属性要用?前缀，日期这类复杂类型需要转成字符串格式（比如ISO字符串），而且组件必须支持对应的HTML属性反射。

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