I posted a tweet yesterday that was met with some controversy, so I thought it would be a good idea to unravel it.

We tend to think of components as things that belong to a framework. After all, React has components, Vue has components, Angular has components…it's just how we've always used them.

A great trick to find the closest element in the DOM that matches an arbitrary selector is Element.closest().

The new :focus-visible CSS selector lets us remove unsightly focus rings that often result in developers adding this to their stylesheets:

Let's say I have a web component with an open shadow root, like this one from Shoelace.

By now, most devs are familiar with the prefers-reduced-motion media query that tells whether or not a user prefers, well, reduced motion. You can use this to tone down (or turn off) transitions and animations in your stylesheet to accommodate users with vestibular motion disorders.

You can get the focused element with document.activeElement but, if it's inside a shadow root, this will be the host element. This happens because of retargeting, but sometimes you might need access to the internal element that actually has focus.

Over the weekend, I finished migrating Shoelace from Stencil to LitElement. Even though consumers of the library won't see much of a difference, this was a major overhaul of Shoelace's internals.

I stumbled upon a great resource for free SVGs. They're currently boasting over 300,000 images. Check it out over at SVG repo.

Postleaf — at least in its current form — has been discontinued. In the future, I'd like to bring it back as something different. Maybe an open source project. Maybe a SaaS product. I'm not sure at this point.