Web Components of November 2022 by Andrew Hudson

Rules

• Create one web component per day
• Use Lit
• Release the web component into the wild
• Code can be found here at github.com/bigandy/web-components-november repo

The Components

🤬
Button, click me!
🦊
Happy Day of the dead day! Happy Day of the dead day! Happy Day of the dead day! Happy Day of the dead day! Happy Day of the dead day! Happy Day of the dead day!
Start End
Start End

So this component is ah-watcher and it listens to the `matched` custom event that is being emitted elsewhere in one of its children. In this example I am using the ah-is-visible element to send the `matched` custom event when an element is visible in its context.

To test this out you will need to scroll the below box to the bottom. That will trigger the event when the "Bottom of the box" text is visible in the scrollbox. There is another element on the right half way up.

Start Middle Right
Bottom of the box

This is a to-do web component which saves the todos to localStorage so if you refresh the page the todos will still be there.

Also if you hit enter while adding a todo in the input box the todo will be added. Nice.

You can delete a todo

You can mark the todo as complete or incomplete

Houdini Banner - checkers

Houdini Banner - circles

Houdini Banner - checkers

Houdini Banner - circles

Play Noise Play Lazer Andrew Emma Marion Arthur Emma Arthur
Looping
Once

So I have created the ah-component-section component to be able to wrap a section and link to it. I have also included links to the previous and next component where applicable.

This component is used to demonstrate the way that lit uses events to go up the tree and properties to go down the tree.

In the ah-house I have a light switch that emits the switch event when it is used and the ah-house component listens for this event.

When a swiched event comes in the ah-component reacts to it and passes down the on property to the ah-light component

This is a switch with sound and mute

Normal Switch

Muted Switch

Label Hidden

Full Width

This is the ah-connect-four component

This is the ah-video-capture component

This is the ah-image-game component

This is the ah-habit-tracker component which was originally inspired by a Habit Tracking Poster from do lectures. I had created it on Codepen using pure JS and this component is based on that.

This is the ah-theme-selector component.

This is the ah-bluetooth-hr component.

This is the ah-geolocation component.

This is the ah-image-match component.