Using tagName from Custom Elements Manfiest to populate ArgTypes in Storybook 10

[hasanirogers]

Summary

I upgraded to Storybook 10 (web-components-vite) and my mdx files stopped working. I traced the problem to how I'm using the of prop on the ArgTypes block. I'm doing:

<ArgTypes of="kemet-tooltip" />

Where kemet-tooltip is the tagName of the web component. The docs say to give of a CSF export but when I do this ArgTypes only displays information in the story. I want it to display all the information in CEM. Events, Custom Properties, etc.

Is this a bug or am I doing something wrong?

Repo: https://raw.githubusercontent.com/hasanirogers/kemet-ui/refs/heads/v4.0.0/src/stories/docs/button.docs.mdx

ArgTypes with a tagName worked in 9x.

Additional information

No response

Create a reproduction

No response

[dosubot[bot]]

Hi @hasanirogers! I'm Dosu and I’m helping the storybook team.

In Storybook 10, the <ArgTypes of="kemet-tooltip" /> pattern (using a string tagName) is no longer supported in MDX. The of prop now requires a CSF export or component reference, not a tagName string. This is a breaking change from 9.x, and is reflected in the current docs and code—using a tagName string will not display full Custom Elements Manifest (CEM) metadata like events or custom properties, only story args or limited info if it works at all [docs].

To show full CEM metadata in your docs, you need to:

• Reference your component via a CSF export in the of prop, e.g. <ArgTypes of={ButtonStories} />.
• Make sure your CSF file's default export sets the component property to your web component's class or constructor, and that your Storybook is configured to load your custom-elements.json (CEM) [controls docs].
• If you want to show events and custom properties, ensure your CEM is complete and Storybook is picking it up. Sometimes, you may need to manually augment argTypes in your CSF file to surface all the metadata you want.

There is no built-in way in Storybook 10 MDX to use a tagName string directly for ArgTypes. If you need to display more than what Storybook infers, you can manually define or extend argTypes in your CSF file, or preprocess your CEM to ensure all desired metadata is included [discussion].

This is not a bug, but a change in intended usage and documentation for Storybook 10 [issue].

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[hasanirogers]

When I try to set the component property of my default export (which has a type of a Meta object) to my class constructor, Typescript complains that the component property expectes a string. Also, when I test it anyways using the class constructor my full data is still not being showing. I can't see events, parts, custom properties, etc. It's cumbersome to have to define all of this in every Story. I'll probably write my own solution that looks at CEM but this seems like a major breaking change for web components with little documentation.