mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 07:21:16 +08:00
22 lines
805 B
Plaintext
22 lines
805 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 { setCustomElements } from '@storybook/web-components';
|
|
import customElements from '../custom-elements.json';
|
|
|
|
setCustomElements(customElements);
|
|
```
|
|
|
|
You can generate a `custom-elements.json` using either [web-component-analyzer](https://github.com/runem/web-component-analyzer) or [stenciljs](https://stenciljs.com/) (if you're using Stencil).
|