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…


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman

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 #


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman


Print Share Comment Cite Upload Translate
APA
Zach Leatherman | Sciencx (2023-02-09T03:04:51+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 2023-02-09T03:04:51+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 2023-02-09T03:04:51+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 2023-02-09T03:04:51+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: 2023-02-09T03:04:51+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/ | 2023-02-09T03:04:51+00:00
https://github.com/addpipe/simple-recorderjs-demo