Web Component Hord

These are a collections of HTML web components I encounter in the hopes of learning how to make one beyond how documentations and MDN says how to. If there's one regret I have, it's not knowing web components sooner.

Sundry

Pagefind Search

A supplement wrapper to control the asset loading of the component in PageFind, a fully static search engine that doesn't need app server to run.

source c.o. 11ty creator Zach.

As Dithered Image

Component that allows you to do Atkinson's Dithering on an image.

source

code Pen

A code pen web component coded inside codepen because why not?

source

Syntax Highlight

Custom element using CSS Custom Highlight API for syntax highlighting

source

Split Flap

Remember that old flipping display at airports from the past? This is a web ui version of that.

source

Baseline Ray

In a quest of remaking Web Readiness site, Juan creates a simple component to represent readiness status for an html element.

source

Anatomy

Not really a specific component but a general instructions of how to make a basic one from scratch. Bushell explains each component of a web component in this example-filled post.

source

Two - Up

My first really used web component came from Google. It allows you to slide view two images on top of each other. Works great in comparing before-after or this-that scenarios.

source

Smart Shake

This just jiggles each letter within it in a satisfying way.

source