Dave Rupert has a new syntax highlighter: MicroLighter. He wrote about the why. There are a bunch of trade-offs with all the technologies that do this job. The trade-offs here seem pretty worth it for a relatively lightweight, infrequent syntax highlighting job. I mean 2 KB as a base library is pretty amazing, with the languages coming in even smaller. I generated a demo and fiddled around with it a little just to show it works super well on CodePen, naturally.

My favorite part about MicroLighter is how it uses the web’s Highlight API, a feature I was pretty into exploring about a year ago. The idea that it “doesn’t touch the DOM” is kind of amazing to me. I also like how Dave, as the President of Web Components, made it available as <micro-lighter>. I feel like a lot of projects like this would have gone straight for a React component or other framework-specific implementations. Dave can confidently say: you don’t need that, this will work everywhere. Which is true and satisfying these days. You not using web components is a you problem.

Which means I can now drop some hot web component links for you!

• Cool term from Ariel Salminen: Progressive Web Components, along with a library.
• If you’re curious about the encapsulation potential of web components, Cassondra Roberts’ talk Shining Light on the Shadow DOM from a few years ago is good.
• It’s very reasonable for a design system to put form-related elements within custom elements. The pseudonymous mehm8128 has an example with a <label for="checkbox"> and <fancy-checkbox id="checkbox">. So the real <input type="checkbox"> is now with a Shadow DOM and the real <label> probably can’t “see” it. Well now there is a solution for this. I tested it and it works, in Chrome at least 😬.
• Remy Sharp shared a trick I absolutely did not know. In Chrome DevTools, $() maps to querySelector and $$() maps to querySelectorAll. I knew that. Reminiscent of the jQuery days. But now $$$() maps to a query that goes through Shadow DOMs.