Web Components

Love these little animations (“code snacks”) from Lauren Basser that illustrate basic technological concepts. Check out the ones for Working Directory and Shadow DOM — not the easiest concepts to illustrate as simply as this!

You’ve got your permissions elements, custom element registries, a potential future for HTML includes, HTML-in-Canvas, and a bunch more.

A brand new 2 KB client-side syntax highlighter from Dave. Includes a web component for very easy usage. Maybe these web components have legs, eh? The most interesting part about it is that it doesn’t touch the DOM. It uses the Highlight API to colorize text and TextMate grammars (the same as in VS Code) […]

Chrome 146 introduced a scoped custom element registry, allowing different versions of custom elements to share the same tag name without using the global namespace.

If you have any shared styles across multiple shadow DOMs (imagine 20 custom button components), a Constructable Stylesheets is just way more efficient.

You don’t necessarily have to do focus handling yourself with shadow DOM web components. For simple wrapper components, there is an easier (and better) way.

When you make a Web Component for a form element, you’ve got a bit of extra work to do to make sure they participate on the form in expected ways.

A framework-agnostic component library, designed to be styled. It can be done.

Turns out `anchor-scope` is pretty darn useful for button/menu setups that will appear multiple times on the same page.

Putting a YouTube video inside a closed details element means it won’t load until that details element is opened. We can use that.