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 Updates
APA

Zach Leatherman | Sciencx (2021-01-22T06:00:00+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 ,<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 ]. 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 . 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: ]
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/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.