What you'll build!

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-viewer words="Hello.World"></word-viewer>

Clicking it plays the words in reverse, and changes some styles.

What you'll learn

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:

• <Model Viewer> - Like an <img> tag but for 3D!!!!
• Lion component library - Fundamental white label web components for building your design system.
• Shoelace - A forward-thinking library of web components.
• And many of the Open Web Components: Component Libraries!

There's nothing to solve in this tutorial part, it's here to show off what you'll have built by the end.

Add your own <word-viewer> tag in the list!

Press "Solve" to see more fun with the <word-viewer>, and when you're ready to build click "Next".