Developers sharing their stories and practical examples of building Web Components.

Add responsive-friendly enhancements to <details> with <details-utils>

Over time I’ve collected a bunch of add-on utilities to enhance <details> with new features and functionality.

Building a tooltip component

A foundational overview of how to build a color-adaptive and accessible tooltip custom element.

Building an accessible image comparison web component

We needed our blog posts to be accessible and to load quickly, so we decided to write our own solution.

Building tabs in Web Components

Some details about making a Tabs web component for Nord Design System.

Creating a Flying Boo Halloween Web Component

Making a Web Component that flies around the page and hides when your mouse cursor gets close enough.

Introducing a2k - A UI library designed to capture that retro 2000s feeling

What a2k is, how it’s been built, and how to use it to build retro applications using your favorite frontend framework.

Introducing Shoelace, a Framework-Independent Component-Based UX Library

A post about Shoelace, a component library by Cory LaViska, but with a twist.

Mux-flavored HTML video tag

You can now use the <mux-video> element the same way you would use the <video> element.

On ratings and meters

Trying to style a <meter> element to look like a star rating is tricky. So, I set out to create a proper web component.

On Yak Shaving and <md-block>, a new HTML element for Markdown

I wanted to showcase usage examples of a web component that I needed for the project I was working on.

Spicy Sections

Just wrap semantic HTML in the web component, and then use CSS to control which type of design kicks in when.

Use defer-hydration in your Web Components for… well, deferred hydration

By now you may be familiar with <is-land>, the Eleventy utility for islands and partial hydration.

Web Components as Progressive Enhancement

You can run into challenges if you try to replace existing HTML elements with web components.

What is the best way to mark up an exclusive button group?

Web component based on the Twitter discussion about the most accessible way to mark up button groups.

Edit this page on GitHub