[Bug]: Autodocs not working with Lit component

[boyatbeebee]

Describe the bug

When using the tags: ["autodocs"] feature together wit a Lit component the jsdoc comments in the component file do not show up in the Storybook docs page.

To Reproduce

https://codesandbox.io/p/sandbox/storybook-lit-and-autodocs-gzktrj?file=/stories/Button.js:7,15

To use: npm i followed by npm run dev

This repo has a clean install using npx storybook@latest init

In the wizard I chose vite and web-components.

Button.js has jsdoc comments at the top. These comments do not show up in the corresponding docs page.

System

Environment Info:

  System:
    OS: macOS 13.4.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
  Binaries:
    Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.0/bin/npm
  Browsers:
    Chrome: 116.0.5845.96
    Safari: 16.5.2

Additional context

No response

[yringler]

💯 I would only point at that this is a (I think critical) feature request, not technically a bug. Note that react Meta.component type is a class, and web component Meta.component type is string.

The react renderer understands react. That's why you can do cool things like not pass a render() method, and it will know by itself how to pass the story args to the component.

The web component renderer doesn't have any understanding of webcomponent internals - it just takes a string. Which is probably because the storybook team doesn't want to choose one webcomponent framework to the exclusion of all else?

But I would suggest that a native web component (and lit is a native web component) will end up inheriting from HtmlElement. Component could be typed as HtmlElement (Or HtmlElement | string), and can be parsed like any other typescript class, and can have their properties set just like it would any other HtmlElement.

[yringler]

So turns out that you could get autodocs from jsdocs on the lit element, if you run an analyzer first. https://storybook.js.org/docs/web-components/essentials/controls#choosing-the-control-type I'd rather have storybook pick it up itself from the class, but this isn't too much to add to the build.

[rene-vandenberg]

Thank you @yringler for that comment. If I hadn't read it I would still be trying to figure out why autodocs isn't picking up my JSdoc. It is indeed not too much to add it to the build yourself but Storybook could have definitely done a better job at telling people this is such an important step for Web-components.

[mcookdev]

This has not been addressed in v8, just FYI.