2021-06-25 10:24:28 +02:00

22 lines
989 B
Plaintext

To use auto-detected controls with Web components, you must fill in the `component` field in your story metadata:
```ts
export default {
title: 'Button',
component: 'button', // name of your button component
};
```
Storybook uses this to auto-generate the `ArgTypes` for your component using your [custom-elements.json](https://github.com/webcomponents/custom-elements-json) file.
You'll need to register that in `.storybook/preview.js`:
```js
import { setCustomElementsManifest } from '@storybook/web-components';
import customElements from '../custom-elements.json';
setCustomElementsManifest(customElements);
```
You can generate a `custom-elements.json` using [@custom-elements-manifest/analyzer](https://github.com/open-wc/custom-elements-manifest). If you're using the pre-v1.0.0 version of `custom-elements.json` you can use either [web-component-analyzer](https://github.com/runem/web-component-analyzer) or [stenciljs](https://stenciljs.com/) (if you're using Stencil).