A “stand alone” Web Component is a Web Component that provides some design or functionality but that has little by way of dependencies, strong opinions, or heavy design. In other words, Web Components that could easily imagine sliding into any project without much trouble.
I’m attracted to these because it feels like each of them makes the web a little better. If you need the effect these provide, you can just grab them and use them. It eliminates the need for anyone to have to re-do work already done. It mostly doesn’t matter what framework you’re using or other technologies are at play, because these are just a native part of the web. They vary in API complexity, how progressive enhancement friendly they are, how they fall back, and how resource intensive they are.
These are all hand-picked from my own internet wanderings, Dave’s Awesome Standalones list, and Serhii Kulykov’s Standalone Elements list.
My goal with the list below is to show you how easy they are to use by embedding a Pen. CodePen does not have a backend server, bundler, or npm support, and yet all of these work by linking up the published JavaScript (and sometimes CSS) from somewhere and then using the <standalone-component> in HTML.
<browser-window> by Zach Leatherman
<md-block> by Lea Verou
<sparkly-text> by Stefan Judis
<link-peak> by David Darnes
<lite-youtube> by Paul Irish
<plucky-underline> by Noah Liebman
<uke-chord> by pianosnake
<range-slider> by André Ruffert
<toggle-password> by Chris Ferdinandi
<relative-time> by Chris Burnell
<two-up> by GoogleChromeLabs
<emoji-picker> by Nolan Lawson
<clipboard-copy> by GitHub
Note: you may have to click over to CodePen to see this because of iframe permissions.
<use-html> by Mayank
<scribe-music> by Stephen Band
<l-i> by Thomas Portelange
As in “the last icon library you will ever need.”
