Web Components with Lit: “Invent new HTML elements to fit your use cases”

We spoke with Andrew Jakubowicz, software engineer at Google, about Lit — a simple library for building fast, lightweight web components.

devmio: Thanks for taking the time to answer all of our questions! First of all, could you please introduce yourself to our readers. How did you end up in your line of work?

Andrew Jakubowicz: Hello! I am Andrew Jakubowicz, a developer on the Google Lit team! I ended up in my line of work because I have always been interested in creating visual experiences, first through Adobe Flash, and then via the web! At school I was studying to become a Veterinarian, but I got frustrated with the educational technology, so I teamed up with the University staff and helped them build educational material using the web! I was informed that this is a real career path, so I promptly dropped out of veterinary school, and went full steam ahead into a career of front-end web development!

devmio: What exactly is Lit? What can it help users accomplish?

Andrew Jakubowicz: Lit is a simple library for building fast, lightweight web components. I like to say, Lit lets you invent new HTML elements to fit your use cases!

People tend to use Lit for three main use cases: building standalone components, design systems, and apps.

Because each Lit component is a standard web component, they are natively supported by browsers, and can be used in any HTML environment, with or without any framework. This makes Lit an ideal choice for shareable components or design systems. Lit components can be used across multiple sites and apps, even if those apps and sites are built on a variety of front-end stacks. Developers using Lit components don’t need to write or even see any Lit code; they can just use the components the same way they’d use built-in HTML elements.

Lit is also perfect for incrementally enhancing basic pages by sprinkling custom elements into your HTML. Browsers will recognize Lit components and initialize them automatically! Lit components can be added to your site whether it is plain HTML, Markdown, managed by a content management system (CMS), built with a server-side framework, or generated by a static site generator.

Of course, you can also build highly interactive, feature-rich apps out of Lit components, just as you would with a framework like React or Vue. Lit’s capabilities and developer experience are comparable to these popular alternatives, but Lit minimizes lock-in, maximizes flexibility and promotes maintainability by embracing the browser’s native component model.

When you build an app with Lit, it’s easy to sprinkle in “vanilla” web components, or web components built with other libraries. You can even update to a major new version of Lit–or migrate to another library–one component at a time, without disrupting product development.

devmio: How small is Lit’s footprint? What benefits does this have on performance?

Andrew Jakubowicz: The lit module is roughly ~6kb minzipped (15.8kb uncompressed). To illustrate the size better:

• React (with react-dom) is ~44kb minzipped (138kb uncompressed)
• Vue is ~35kb minzipped (89kb uncompressed)

Lit’s size keeps your frontend bundle small and loading times fast. Lit is also fast at runtime because it separates the dynamic parts of a template from the static parts, and only updates the dynamic parts when their state changes. This is more efficient than VDOM (as used in React), because VDOM treats the whole template as dynamic. So VDOM must traverse all nodes, even if they could never change, to find the DOM updates to perform.

devmio: Could you tell us more about its interoperability?

Andrew Jakubowicz: Lit components are interoperable because each component defined with Lit is a standard web component – Lit is just an implementation detail of the component.

Since web components are how Lit achieves interoperability it’s worth going into more detail on what web components are, and the benefits of adhering to the web components interface.

Web components are the browser’s native component model that allows you to create encapsulated, reusable, custom HTML elements and open up the standard HTML element interface to custom UI components.

Elements are already familiar to developers and used by frameworks for creating DOM, making web components inherently compatible with existing code:

• They have the same API as other HTML elements, and are created in the same way, e.g., via static HTML markup, innerHTML, document.createElement(), element.cloneNode(), etc…
• Because frameworks such as React or Vue ultimately create HTML to render, Lit components can be used within them with no changes. They essentially get treated like a built-in element like <video> or <input>.
• Custom element tags can be included in standard HTML markup, making them compatible with existing tools that handle HTML, like Wordpress, Blazor, Ruby-on-Rails, Drupal, or Django, etc.

The interoperability of web components goes beyond defining new custom elements. Shadow DOM enables native encapsulation of element internals so that elements on the same page don’t interfere with each other. No more accidental CSS collisions, or query selectors that reach into component innards.

True DOM encapsulation is great for durability and maintenance. It allows components to be interoperable with the future and makes incremental component-by-component upgrades possible by separating component interfaces from implementation.

Interoperability extends to developers too and makes front-end skills transferable. By leaning on existing DOM interfaces, custom elements are instantly familiar to developers and reduce the framework-specific knowledge a developer must learn. For example, setAttribute() works the same on a custom element as it does on any built-in element.

Adhering to the web component interface is what allows a Lit component to work everywhere!

devmio: What custom elements does Lit offer and what do these do?

Andrew Jakubowicz: Lit is a library used to build elements, so Lit itself doesn’t offer any elements. There is an ecosystem of open-source components developed using Lit, such as: Shoelace, Adobe Spectrum, ING Lion, Material web, <model-viewer>, etc., which are great for integrating into all sorts of projects. But remember, web components built using any library can be mixed-and-matched together – as long as they are built to the standard web components interface. So when developing new components with Lit, you can compose together web components of any type.

devmio: Who is using Lit? Could you share a success story with us?

Andrew Jakubowicz: On the Lit projects home page you can see some of our users, with links to their design systems. Interesting use cases include Adobe, Alaska Airlines, Cisco, Google, Home Assistant, ING, Microsoft, Red Hat, SAP, Vaadin, vmware, Wired Elements, Reddit, Internet Archive, and JSTOR.

A recent success story is that Google Maps Platform is using Lit to make it much easier for consumers of their API to integrate Maps features with drop-in declarative HTML elements! And Adobe Photoshop on the web is built using Lit-based web components!

devmio: As for the future, what’s on the roadmap ahead? What upcoming features are currently in progress that we can look forward to in the next release?

Andrew Jakubowicz: At the moment, we are working on Lit 3.0 and a bunch of related releases! Lit 3.0 removes IE11 support and modernizes some JavaScript, resulting in smaller bundles and a small performance improvement. If you are already using Lit 2.0 with no deprecation warnings, then Lit 3.0 is a seamless upgrade! In fact, upgrading the thousands of components within Google required no changes.

We are also taking this opportunity to graduate some of our labs packages. These are packages that we have been testing and getting feedback on, and a couple are ready to be released as a major release. Specifically, we are planning on graduating the React, Context, and Task labs packages. The React package helps users wrap their Lit elements in a more idiomatic React wrapper, to smooth out some of the ergonomics that React developers expect when using components. Context is a way to make data available to entire component subtrees without manually passing the state through all the child components. And Task provides ergonomics for handling asynchronous tasks. You can read more about our labs packages over on lit.dev/docs/libraries/labs/.

Finally, we are working on three new things for Lit 3.0, each with RFCs that I’ll link if you want more details! With TC39 (the standards body that oversees the JavaScript language) agreeing to add decorators to JavaScript & browsers, and TypeScript 5.2 adding support for this spec, we’re working on supporting standard decorators (RFC). Our current decorators will continue to be supported. The community is interested in signals, so we’re adding a nice signals integration package to labs (RFC), and for large Lit apps – we’re creating an optional compile transform that can optimize your first render (RFC).

If you’re excited about following our progress or contributing yourself, please talk to us through our various communities which can be found from our community page!

devmio: How can users get started with using Lit in their projects? What are some good beginner resources they can use?

Andrew Jakubowicz: The best place to start is on our website, lit.dev. Check out the learn page which contains a great “Intro to Lit” tutorial. If you have questions or just want to hang out with the Lit community, join us on Discord at https://lit.dev/discord. If you like learning from videos we also have a YouTube channel: https://www.youtube.com/@buildWithLit. All the places to talk to us can be found here: https://lit.dev/docs/resources/community/

devmio: Besides Lit, what other software, programming language, or upcoming tech are you most currently excited about to see develop further?

Andrew Jakubowicz: Maybe this is a cliche answer, but I personally thoroughly enjoy tinkering with Rust. I even have a YouTube channel called YouCodeThings that I sadly have not touched in a while containing some old Rust content. Although that channel has died, I continue to work on rusty things on the side! For the last couple months, I’ve been writing a game in Rust and Godot, and that has been wonderful. In the browser space I’m very excited about the declarative DOM parts proposal, which would immensely benefit anyone building a library or framework that needs to clone DOM, and maintain references to parts of the DOM. Finally, I am always delighted to see what wonderful things people build on the Web!!!

Thank you to Kevin Schaaf, Elliott Marquez (@techytacos), and Justin Fagnani (@justinfagnani) for reviewing.