Web Components Hit Their Practical Moment
Dave Rupert made a case at a recent An Event Apart talk that Web Components have only recently become a viable option for production work. The turning point was Edge moving to Chromium about a year ago — before that, the browser had no Web Component support at all. Anyone shipping them earlier was either leaning on hefty polyfills or using a progressive-enhancement approach where failures were graceful, or they were working in a locked-down environment like an intranet or Electron, where every user runs the same browser.
Web Components still aren't a compelling choice for most developers, in my view, but they're getting close. A big part of the appeal is the developer experience of dropping in pre-built components, made possible by ES Modules and the simplicity of an import statement.
Nolan Lawson's emoji picker is a good case in point:
That's one line of JavaScript, one line of HTML, and one more line of JavaScript to wire it up and get a JSON response for a selection. That kind of DX is what gets attention.
Standalone Components, No Framework Required
That emoji picker isn't an outlier. Rupert maintains a list called Awesome Standalones — Web Components that aren't part of a larger system, just self-contained widgets you can drop into any page. The repo currently lists about 20 of them.
GitHub's copy-to-clipboard element is another example. It comes across the wire at roughly 3KB, and how you use it in production is up to you — load it from a CDN, bundle it with your own code, or treat it as an on-demand one-off. Notably, this one skips Shadow DOM entirely.
The Shadow DOM Tradeoff
That's not a knock on Shadow DOM — it's arguably the most useful feature of Web Components since it can't be replicated by a JavaScript library, being a native browser capability. But styling options for Shadow DOM aren't great. Use three different standalone components that each have their own approach to styling through Shadow DOM, and you'll quickly hit friction.
The bigger opportunity is developers starting with simple drop-ins, seeing the benefits, and then building their own. Design systems built from Web Components look like a genuine sweet spot; several large organizations already do it that way.
The longer-term hope is that common UI patterns get consolidated. Even if native HTML never gets a tabs element, a Web Component could fill that gap — polished in UX and accessibility, yet styleable enough for any site to adopt. First, though, someone has to build it.
