Web Components of November 2022 by Andrew Hudson

Toggle Details


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

    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.