Trying Lit: Google’s Web Component Library

Let’s build something with Lit!

Photo by Cullan Smith on Unsplash

Like all major players in our industry, Google has its own proposed alternative to what building Web Components should look like: Lit.

In the past, I tried Microsoft’s FastUI alternative and built a basic To-Do app with it.

Now I’m going to try and do the same thing with Lit to try and understand what is the approach they’re taking.

Let’s see what that looks like.

First things first, what is Lit?

Let me be more specific, because saying that Lit is Google’s proposal for working with Web Components is not really saying much.

In fact, Lit is the set of core elements you’ll need to create your own Web Components. They provide you with everything you’ll need from styling and templating all the way to having reactive properties which allow for very interesting behaviors.

What is Lit not doing then? Well, the only thing that I was missing to be honest, is a pre-defined set of components ready for developers to use. Much like FastUI does.

If you’re looking to start a project using some type of components, it’s always useful if you have a starting point, something to base the rest of your code on. However, that’s not what Lit provides, Lit is not a component library, it’s “just” a set of core elements that you’ll need to build your own library.

Of course, I say “just” with quotes, because there is a lot of work inside Lit and you can see it when you browse the documentation.

So let’s get coding.

The app I’m going to build

For this example, I’m going to be building a To-Do app, because by now, this is like the “hello world” of web development, isn’t it?

The app will look like this:

It’s not super pretty, I know, but it’s functional, and that’s all I care about right now.

The way the app is going to work is by allowing the user to enter a task in the input field, and when clicking on the “Save” button, an internal list of “todo” tasks will be updated. Then automatically the list and the total count should also update without me having to do anything logic-wise.

Let’s see how we can do that.

Setting up the Lit project

Something else I found missing from the Lit project is a way for me to get started quickly. I have to admit, I’m a bit spoiled by the rest of the ecosystem around web development, all I usually have to do is create-<framework>-app or something like that and I’m ready to get started.

There is nothing that obvious for Lit.

However, after browsing the docs for a bit I found that you can use the Open-WC project to build a Lit-based application.

So to create a new project, you simply have to do:

It’ll ask you a few questions about what you’re trying to build, but once you get through them, you’ll have a lit-based project already set up and ready to start with npm start .

Once you’re done, the folder structure should look like this:

We’ll be adding our components inside the src folder.

Creating our first component with Lit

Note that for this I’m going to be using TypeScript so I can take advantage of the decorators provided by Lit. You can do this just as well with plain JavaScript, the documentation has examples in both languages, so it shouldn’t be a problem.

To create a Web Component with Lit, you basically have to define a class that extends LitComponent and provides the render method, which is the one returning the rendered HTML.

That’s all there is to it really, of course, the more complex your components are, the more complex their structure will be.

For me, the ToDoList component, which takes care of rendering the form elements and the main list of tasks, looks like this:

Let’s go point by point:

1. The first thing to consider is the customElement decorator. This decorator allows me to define the class as a web component and specify the name of the HTML tag (in this case, todo-list ).
2. I then define my class properties. Some of them have the property decorator on top, those are going to be my reactive ones. Whenever they change, the component will be re-rendered. The rest are just internal properties related to the logic of my component.
3. The styles for the component are defined in the styles property. This is inherited from the ListComponent class, so here is where you’ll put your CSS.
4. The removeTodo and addTodo methods are completely normal methods. These are the ones I defined specifically for my component, and they hold the business logic around adding and removing elements to my list. Notice how I don’t have to treat reactive and normal properties differently, they’re all the same for me.
5. Finally, the render method, which is where the HTML rendering happens. Here you can see that event names are prefixed with the @ character, and that props for other Web Components, are prefixed with a . (see how I assign the props to the todo-item component. Also, notice on line 95 how I’m passing one of my methods as a prop to the component, and to make sure it keeps working correctly, I have to re-bind it to myself before passing the method’s reference. Otherwise, when the method gets executed, its context will be of the ToDoItem class (and of course, it will not work).

The other thing to note is that adding conditional logic or loops to the rendered HTML is as simple as using JavaScript expressions inside the string template. You don’t need special directives or special components for that here. You may or may not agree with it, but Lit is taking advantage of JavaScript’s functionality to simplify that part of the rendering process.

💡 Tip: If you’re creating something bigger than a Todo app, it might be worth considering making your UI components reusable. And alongside Lit, Bit can help by packing your web components into independent packages, which can be shared and reused across the entire project, helping to maintain consistency in design. Bit provides an integrated dev environment (compiler, tester, linter, documentation, CI, dev server, and packaging/dependency management/bundler all-in-one) for building your apps.

Find out more here:

Introduction to Lit | Bit

Creating the ToDo items and receiving props in our Web Component

If you’ve worked with React, Vue or something similar in the past, you’re probably familiar with the concept of “props”.

Essentially, all attributes used on the HTML for a component get mapped into individual variables inside your component’s code.

For Lit’s Web Components, the mapping is not that trivial, but it’s not hard either.

In fact, you already saw how that is done, you have to prefix the name of the attribute with a . so that the library knows to pass that value to the property defined in the component.

Look at my ToDoItem component:

This one is certainly a lot simpler, it defines 2 properties that are mapped to the corresponding HTML attributes used from the ToDoList component and it renders a very simple HTML.

The only interesting bit to look at here is that on line 33 I use the itemRemover function that I received as property and that in fact, it’s the method from the ToDoList class. If I hadn’t bound the method to the proper class, by the moment I executed this prop, then the context would’ve been lost and it would’ve failed to execute (because internally it uses the this keyword to reference properties from the TodoList class).

Putting it all together and making it work

The last bit required to get both these components working, is to import them into your HTML.

If you remember from before, in our folder structure, we had an index.html file. Whenever you run npm start the web browser will open this file. so make sure it looks like this (or similar):

In other words, make sure you import both modules from the out-tsc folder which is where the TypeScript compiler will place them. If you’re not using TS, then you’ll have to use another importing route.

If you don’t import these files, the app will not render, but it will not give you any errors either, because the browser will simply ignore the custom HTML element (I spent 20 minutes trying to figure that one out! :P ).

And that’s it.

If you’ve been following along, you probably have a working to-do app, if you want to look at the code yourself and test it out, you can clone my GitHub repo here.

Have you tried Lit before? Or any other Web Component library? Which one is your favorite one?

Build apps with reusable components like Lego

Bit’s open-source tool help 250,000+ devs to build apps with components.

Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.

→ Learn more

Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:

→ Micro-Frontends

→ Design System

→ Code-Sharing and reuse

→ Monorepo

Learn more

Introducing Lit Component Development Environment

How We Build Micro Frontends

How we Build a Component Design System

How to reuse React components across your projects

5 Ways to Build a React Monorepo

How to Create a Composable React App with Bit