Skip to main content

Minimum Viable Web Component (by Zach Leatherman)

Visit external resource

Zach tweeted last year to share a codepen which illustrates the very simple boilerplate needed for a minimum viable web component. Note: his example is so simple that in this case the JavaScript isn’t actually needed for the custom element to work, however the provided JS is a starting point for when you do actually intend to add JS-driven features.

The HTML:

<foo-component>Hello, world</foo-component>

The CSS:

foo-component {
font-size: 4em;
}

The JS:

customElements.define("foo-component", class extends HTMLElement {
constructor() {
super();
// Add your custom functionality.
}
});
External Link Bookmark Note Entry Search