A little collection of theme-less Web Components

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