In this tutorial you will invent your own HTML element: <word-viewer>. It's in the proud tradition of other useful elements like <marquee> and <blink>! You can see it on the right!
The word-viewer component takes a list of words separated by periods, and shows them one at a time. You use it in HTML like this:
<word-viewerwords="Hello.World"></word-viewer>
Clicking it plays the words in reverse, and changes some styles.
Check out the video that accompanies this tutorial
This is a weird thing to build, but in doing so we'll touch upon all the core concepts you'll use when building your own Lit components:
Defining your <word-viewer></word-viewer> custom element.
Setting properties from HTML attributes.
Rendering to show a single word.
Lifecycle, and cycling the words.
Basic styles.
Basic events.
Changing styles when play direction changes.
Previous knowledge
This tutorial assumes a basic familiarity with JavaScript or TypeScript, as well as some basics of Lit covered in the Intro to Lit Tutorial.
Why
With this knowledge you can extend HTML to fit your needs! Inventing your own HTML element means your component will work anywhere HTML works, and since most frontend frameworks support HTML, your custom elements work everywhere.
Lit is also used to develop some awesome open source components. Some of my favorites: