It continues to be a big year for Web Components. I’m noticing it more this week as it’s effecting some of my friends. My long-time ShopTalk co-host Dave Rupert just got a job at Microsoft working on Fluent UI Web Components. Probably didn’t hurt that he wrote the book on them. I’m stoked that big, well-funded, public, freely-usable design systems offer Web Components. They are starting to feel more like first-class citizens. For example Google’s material-web is ready to rock, even on CodePen. And classic examples like Lightning. Also, excellent indie Web Component libraries like Shoelace are getting big funding and will surely become well-trusted building blocks for years to come. Maybe the same will happen to Lion. My friend Scott is also working on a new course Web Components Demystified that will bring another cohort of developers to the scene.
Let’s check out some interesting Web Components out in the wild I’ve seen recently and bookmarked:
<sparkly-text>
by Stefan Judis<link-peek
> by David Darnes<plucky-underline>
by Noah Liebman<uke-chord>
by Brian Schwartz<scribe-music>
by Stephen Band<toggle-password>
by Chris Ferdinandi<relative-time>
by Chris Burnell<emoji-picker>
by Nolan Lawson
Dave calls these kind of things “Standalone” Web Components and that name is corroborated with this Standalone Elements showcase. I like that name. I guess they are more about functionality than design. It’s not that these things have no design, it’s just what little they have you can easily imagine customizing to your own site, or just leaving as default.
As long as these components are published somewhere public and linkable, they are easily usable on CodePen. NPM is probably a good classic choice, as it helps the appealing “lives forever” aspect of Web Components. And the “distribution” angle is pretty relevant too! People use things that are easy to use.
I really feel like there really should be a public index of Web Components in this “just grab it and use it” category. Should we just call Serhii Kulykov’s site the canonical place? I’ll do a PR if I can wrastle up some time. Dave’s site is fine too and honestly easier since it’s just some Markdown. What would be extra cool though is some better metadata on either/both, like the author, where it’s hosted, an ideally a live demo.
This all reminds me of the peak jQuery days where you could find all sorts of stuff designed as “jQuery Plugins”. That was credit to jQuery for making a nice API for that, and at that time it was likely the jQuery API was quite useful to use for DOM-related-anything. But, of course, it required jQuery, and when jQuery went out of favor, we lost all those plugins. The same sort of thing happened with React. All sorts of componentry built only to work with React. That, of course, is limited to sites that use React, and guess where they will go when React falls out of favor? The graveyard, yo.
But with Web Components… this story is likely to end differently. Web Components don’t depend on any library or framework, that however popular, will have a rise and fall. A Web Component, which it itself a native part of the platform, with no dependencies other than the platform, is likely to last as long as the web does.