Showcase
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.