TL;DR: Everyone’s talking about HTML Web Components, and I think it’s the start of something magical!
One nice thing about running a front-end newsletter is that you get to keep a sort of birds-eye view of what’s happening across the industry as a whole. A common pattern I see is the people who live on the bleeding edge of what’s possible, like Rachel Andrew, Una Kravets, Jen Simmons, and Miriam Suzanne, tend to write about exciting new things that then get shared around the community and see gradual adoption over time.
A less common pattern is to see a technology that everyone agrees is great, but struggles to catch on until someone writes something that manages to crystalize the pitch in a way that gets widespread adoption. These inflection points can be really exciting, seeing an idea sweep across the community like wildfire. A good example is Ethan Marcotte’s original Responsive Web Design article from 2010. All the pieces already existed, but Ethan put them together in a way that clicked for people and attached the name that came to define a generational shift in web design.
Well, I think one of those moments is happening right now! If you’ve missed the buzz around “HTML Web Components,” then consider this a nudge from me to check out any of these excellent articles that have appeared on the topic in the last few weeks:
- Blinded by the Light DOM by Eric Meyer
- HTML Web Components by Jeremy Keith
- “Shadow DOM is not a good default” by Robin Rendle
- HTML Web Components by Jim Nielsen
- HTML Web Components: An Example by Jim Nielsen
- An Attempted Taxonomy of Web Components by Zach Leatherman
- Messin’ Around With Web Components by Lee Reamsnyder
- The Elevator Pitch for Web Components by Chris Ferdinandi
I don’t know about you, but I read every one of those articles, and for the first time, web components “clicked” for me. Suddenly, I understood how they could fit into our workflow, and where they’d be a good addition. I was excited about web components in a way I’d never been before.
Of course, as Jason pointed out, web components are hardly new, and people have been writing about them for some time (including us here at Cloud Four!). Here are just a few examples from my web component bookmarks, which date back to 2018:
- Web Components Are Easier Than You Think by John Rhea
- Mighty Morphin’ Web Components by Tyler Sticka
- Building an Accessible Image Comparison Web Component by Paul Hebert
- Web Components as Progressive Enhancement by Paul Hebert
- HTML With Superpowers by Dave Rupert
- Let’s Talk About Web Components by Brad Frost
And it’s clearly not just me. Eric’s post showed me that web components could be simpler than I thought. Jeremy came up with a brilliantly approachable name with “HTML web components.” And everyone else who wrote about them in the following weeks added to the growing sense that, yes, this was a thing that I could do, that had clear value, and I began looking for opportunities to use them.
It didn’t take long. Jason’s been tinkering with 3D models for AR applications and asked me to find a way to lazy load model-viewer widgets so someone reading a blog post wouldn’t need to download a multiple-megabyte file on page load. It was an excellent opportunity to use a web component to enhance the behavior, and with a bit of assistance from Tyler, we produced Lite Model-Viewer. It’s not the most groundbreaking thing, and it’s an incredibly specific use case. But it was easy, fun, and a great way to get some hands-on experience.
I suspect that in a few years’ time, we’ll look back at this month, and especially Jeremy and Eric’s articles as an inflection point. Similar to how Ethan managed to make responsive web design accessible to more people, I think we’re looking at the same thing happening right now for web components.