📖 Storybook with simple 🍦vanilla webcomponents

It took me way too long to figure out how to get simple custom vanilla javascript webcomponents working in storybook.
The documentation has no examples and I couldn't find much info online, so thought I'd share how to do it in 4 easy steps. (more for me to have a record to remember how to do it)

1 - Install storybook for HTML only. (this info is hidden behind an accordion on the install page)

npx storybook@latest init --type html 

2 - Start storybook up.

npm run storybook 

3 - Create your webcomponent file in ./stories/my-component.js

// Define your web component class MyWebComponent extends HTMLElement { connectedCallback() { this.innerHTML = '<p>This is my web component</p>'; } } // Register your web component customElements.define('my-web-component', MyWebComponent); 

4 - Create your story file in ./stories/my-component.stories.js

import './my-component.js'; export default { title: 'Example/My-Component' }; export const Default = () => { return document.createElement('my-web-component'); }; 

That's it.

Storybook should now render your vanilla webcomponent. Sorry if this is super-basic, but hopefully it'll help others getting started with storybook without any extra frameworks.