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.


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

The CSS:

foo-component {
font-size: 4em;

The JS:

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