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.

• 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).

• Demo
• Repository

Herald of the Dog #

An announcement bar/banner component with a Hide button that avoids content layout shifts.

• Blog Post: Ruthlessly Eliminating Layout Shift on netlify.com
• Demo
• Repository

Seven Minute Tabs #

A small tabs web component based on the sample from the WAI-ARIA Authoring Practices.

• Demo
• Repository

Honorable Mention #

• Speedlify Score (a little Lighthouse score widget)

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