Simplest example of vanilla webcomponent with no dependencies

[IORoot]

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 documentation, so here's how to do it. (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 I really struggled figuring this out since there were no examples I could find.