A little collection of theme-less Web Components

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 Ra…

Filter Container #

A way to filter visible child elements based on the value of a <select> element.

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 #


Print Share Comment Cite Upload Translate
APA
Zach Leatherman | Sciencx (2024-03-29T15:56:39+00:00) » A little collection of theme-less Web Components. Retrieved from https://www.scien.cx/2021/01/22/a-little-collection-of-theme-less-web-components/.
MLA
" » A little collection of theme-less Web Components." Zach Leatherman | Sciencx - Friday January 22, 2021, https://www.scien.cx/2021/01/22/a-little-collection-of-theme-less-web-components/
HARVARD
Zach Leatherman | Sciencx Friday January 22, 2021 » A little collection of theme-less Web Components., viewed 2024-03-29T15:56:39+00:00,<https://www.scien.cx/2021/01/22/a-little-collection-of-theme-less-web-components/>
VANCOUVER
Zach Leatherman | Sciencx - » A little collection of theme-less Web Components. [Internet]. [Accessed 2024-03-29T15:56:39+00:00]. Available from: https://www.scien.cx/2021/01/22/a-little-collection-of-theme-less-web-components/
CHICAGO
" » A little collection of theme-less Web Components." Zach Leatherman | Sciencx - Accessed 2024-03-29T15:56:39+00:00. https://www.scien.cx/2021/01/22/a-little-collection-of-theme-less-web-components/
IEEE
" » A little collection of theme-less Web Components." Zach Leatherman | Sciencx [Online]. Available: https://www.scien.cx/2021/01/22/a-little-collection-of-theme-less-web-components/. [Accessed: 2024-03-29T15:56:39+00:00]
rf:citation
» A little collection of theme-less Web Components | Zach Leatherman | Sciencx | https://www.scien.cx/2021/01/22/a-little-collection-of-theme-less-web-components/ | 2024-03-29T15:56:39+00:00
https://github.com/addpipe/simple-recorderjs-demo