I often worry about framework churn. A lot. But using a framework isn't a bad thing. After all, they save time. They help you build things faster.

Let's build a button that accepts one color and calculates its hover and focus states automatically. For this experiment, we'll use CSS Custom Properties, color-mix(), and OKLCH to ensure that tints and shades are perceptually uniform.

Web Component authors already know how powerful slots are, but what if you could do even more with them? Here's an interesting technique to use (or abuse) slots in your custom elements. I've been calling the pattern dynamic slots.

I recognize the need for all users, regardless of ability or device, to have undeterred access to the websites and applications that are created with my software. This is an important goal of my projects.

I needed to convert a URL object to a plain object yesterday. You might have used it before. It's pretty handy for working with URLs!

You've likely heard the term "headless component" tossed around. The idea is you get solid, accessible components without any styles. A clean slate to style from scratch! But the structure (bones) and logic (head) are there. You're mostly adding styles.

It's been three years since I broke ground on Shoelace 2.0. Between then and now, the project has amassed over 300 million monthly hits on jsDelivr and, as of today, it is jsDelivr's 73rd most popular project.

Although Shoelace is a web component library, it ships React wrappers that lets you use the library idiomatically in React. This video shows you how to install Shoelace in a brand new Create React App.

Similar to how every custom element must contain a dash, I like to pretend that every custom event must also contain a dash. This removes all ambiguity between native events and custom events.

The topic of custom element event names comes up every now and then, especially from Shoelace users who get confused when events of the same name are emitted from different components.