[Go Make Things] What about Lit for Web Components?

Friday, May 17, 2024

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.

Like this? You can support my work by purchasing an annual membership.

Cheers,
Chris

Want to share this with others or read it later? View it in a browser.

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Ad/iklan :