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:

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

Check out the video that accompanies this tutorial

Permalink to “Check out the video that accompanies this tutorial”

How to build your first Lit component Youtube
thumbnail

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:

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".

Solve ResetNext: Defining the word viewer!