A little collection of theme-less Web Components
January 22, 2021
Filter Container
A way to filter visible child elements based on the value of a <select> element.
- Demo
- Demo on jamstack.org (Filter by Language, Template, or License)
- Demo on zachleat.com (Filter by blog post category)
- Repository
Video Radio Star
A lightweight helper for HTML5 <video>. Enable GIF-like playback with opt-in audio. Autoplay video only when visible (cross-browser). Pause when it scrolls out of frame. Works with SaveData and prefers-reduced-motion. Use custom UI controls (e.g. Play, Pause, Toggle Mute).
Herald of the Dog
An announcement bar/banner component with a Hide button that avoids content layout shifts.
Seven Minute Tabs
A small tabs web component based on the sample from the WAI-ARIA Authoring Practices.
Honorable Mention
- Speedlify Score (a little Lighthouse score widget)
Webmentions