storybook/addons/docs/web-components/README.md

Storybook Docs for Web Components

Installation

• Be sure to check the installation section of the general addon-docs page before proceeding.

• Be sure to have a custom-elements.json file.

• Add to your .storybook/config.js

  import { setCustomElements } from '@storybook/web-components';
  import customElements from '../custom-elements.json';
  
  setCustomElements(customElements);
  

• Add to your story files

  export default {
    title: 'Demo Card',
    component: 'your-component-name', // which is also found in the `custom-elements.json`
  };
  

custom-elements.json

In order to get documentation for web-components you will need to have a custom-elements.json file.

You can hand write it or better generate it. Depending on the web components sugar you are choosing your milage may vary.

Known analyzers that output custom-elements.json:

• web-component-analyzer
  • Supports LitElement, Polymer, Vanilla, (Stencil)
• stenciljs
  • Supports Stencil (but does not have all metadata)

It basically looks like this:

{
  "version": 2,
  "tags": [
    {
      "name": "demo-wc-card",
      "properties": [
        {
          "name": "header",
          "type": "String",
          "attribute": "header",
          "description": "Shown at the top of the card",
          "default": "Your Message"
        }
      ],
      "events": [],
      "slots": [],
      "cssProperties": []
    }
  ]
}

For a full example see the web-components-kitchen-sink/custom-elements.json.