• May 16, 2024

What about Lit for Web Components?

I’ve had a loooootttttt of people ask me about Lit.

Lit is a framework for creating Web Components, built by Google. It includes data reactivity, a tool for rendering CSS-in-JavaScript, and DOM diffing.

As you can probably imagine, I hate it.

Here’s the example they show on their homepage…

import {html, css, LitElement} from 'lit';

export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  static properties = {
    name: {type: String},
  };

  constructor() {
    super();
    this.name = 'Somebody';
  }

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}
customElements.define('simple-greeting', SimpleGreeting);

The other day, I wrote about the wrong way to do Web Components, noting…

To me, this looks like just another JavaScript library.

That it uses the Web Components API instead of a third-party framework is just an implementation detail. The end user experience is the same.

Same thing with Lit.

The second you introduce a third-party dependency, you’re locked in. You’ve completely eroded the value of using platform-native technology.

And I also just think Web Components are the wrong tool for this kind of job. The need for a library to handle reactivity and DOM diffing kind of proves that point.