Lit: a library for building fast, lightweight web components (lit.dev)

Lit is amazing, I'm a big fan of Astro for using it as static websites, blogs, etc., but Lit would've been the second choice if not Astro.

Great project but I can't stand syntax such as decorators.

Hands down the most underrated front end library out there. It powers some major projects like ChromeOS, Chrome Devtools, I think most of Firefox’s UI, Photoshop for the web, MDN etc.

I just came across this resource the other day and found it super helpful, thought I would share it here for anyone who’s interested in working with Lit.

https://lit.dev/articles/lit-cheat-sheet/

I have been using Lit in production for 3 years now. I think it is the best abstraction over the web components API out there.

The evolution of lit is fascinating to watch because it's built and promoted by people with rather visible and public dislike of everything React. And yet, it's already turned into React-lite.

- Custom HTML-like syntax

    <button @click="" .disabled="" />

- Custom Javascript rules

    // valid JS, invalid lit
    const tagName= "a";
    
    `<${tagName} href="">Some link</${tagName}>`

- Custom rules for special functions.

    // classMap looks like a regular JS function, but it's not.
    // Both of these will produce an error
    
    <div class="my-widget ${classMap(dynamicClasses)}  ${classMap(dynamicClasses)}">Static and dynamic</div>

    <div data-class="${classMap(dynamicClasses)}">Static and dynamic</div>

- Context https://lit.dev/docs/data/context/

- Experimental compiler: https://github.com/lit/lit/tree/main/packages/labs/compiler#...

Lit maintainer here. I should be going to bed, but I'll answer any questions if people have any!

Not sure why Lit showed up on the front page tonight :)

For the frontend work that I did, Lit was a godsend. It really helps you build components and apps without getting in the way.

In comparison, Angular is a monster, and React is designed for the old browser capabilities, and is now staying around by inertia, not by inherent quality.

Lit is fantastic lib as a way out from legacy web framework (since can be injected in any framework including Vue, Angular, React). I used it as a way out out of old Vue2 project

I love Lit! I have been using it to develop a in-app widget for product updates here: https://supanotice.com (the in app-widget opens up if you click on the bubble in the bottom right corner)

Really love the abstraction that makes web components easy to use.

I don't see the need for Lit anymore. Lately I have just been raw dogging web components without any libraries. Having a nice templating system like JSX on the server makes it a breeze.

Part of using web components, for me, is that it is just javascript. There is no upgrades or deprecations to think about. Of course those things still exist on the server though, but it is easier to maintain it there.

I had lit in a project at work and not having to deal with it anymore is just great. We already have another heavier component framework to do the actual application stuff anyway, so having two just because somebody wanted to optimize their resume was such a drag.

It all looked nice in theory, but one thing shadow DOM makes worse is A11y, because element ids are now scoped and all the missing describe-by, label-for for things that should link to other side of the fence are a massive pain in the ass.

Big part of it is just skill issue on our part of course.

Working with a large Vue 3 project and wanting to share some of our components as re-usable web components for other sites to embed...

What would be the benefit of rebuilding these components in Lit over using Vue to build them?

https://vuejs.org/guide/extras/web-components#building-custo...

thank you, I am not brining inheritance and decorators back to the web

I looked at lit but chose JSX.

Typescript has JSX built in so when "I made my own framework" I just used that.

“You got Lit up!”

I'm all for a lightweight approach to software development. But I don't understand the concept here.

Looking at the first example:

First I had to switch it from TS to JS. As I don't consider something that needs compilation before it runs to be lightweight.

Then, the first line is:

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

What is this? This is not a valid import. At least not in the browser. Is the example something that you have to compile on the server to make it run in the browser?

And when I use the "download" button on the playground version of the first example, I get a "package.json" which defines dependencies. That is also certainly not something a browser can handle.

So do I assume correctly that I need to set up a webserver, a dependency manager, and a serverside runtime to use these "light weight" components?

Or am I missing something? What would be the minimal amount of steps to save the example and actually have it run in the browser?

I’ve been using Lit to develop my Minecraft skin editor and it has been really nice to work with. Having initially tried working with vanilla web components, then creating my own wrapper class to make them easier to work with, I can say that Lit makes web components really nice to work with.

My editor: https://needcoolershoes.com

I really like the standalone lit-html rendering library but never really saw a need for Lit. Honestly, I find it hard to see a need for more than <any client-side rendering lib> + Web Components when I want client-side rendering.

I made a state management lib for Lit, that's just as lightweight (258 lines) and intuitive:

https://github.com/gitaarik/lit-state

I've used it extensively myself, for creating complex web apps with many (nested) components interacting with each other.

I don't understand why Lit hasn't gained more popularity, because for me it is basically React, but then more browser-native, much less boiler plate, and much faster rendering. There are some things you have to get used to, but when you do it doesn't limit you in any way.

Does Lit have a good component library? Like, a complete web template (eg. Bootstrap/Ant), datepicker, color picker, virtual scroll, data tables, typeahead, tab, etc.

I shipped a project with Lit and I liked it, but I didn't like that I'd need to know the complete project scope up front that I could write everything from the ground up. I know I could use React component for some of the harder stuff but at that point might as well use React and avoid bundling two systems

(Formerly lit-element)

Lit is amazing, one of the most concise framework out there. For deepening my understanding of concepts around Lit, I once built LittleLit, a 37 lines of code framework around Lit-html that helps understand how simple and elegant the moving pieces of this tech can be.

https://benoitessiambre.com/vanilla.html

The developers of data-star.dev are working on something interesting they call "Rocket", but it's currently a WiP and hidden behind a paywall so I can't really compare it to Lit. Lit is great though, used it myself a few times (e.g. github.com/romshark/demo-islands). But I still think there's a learning curve to Lit. Better than raw vanilla JS custom elements API, but still not as simple as it could be.

I used Lit components in a large FE project, enjoyed doing so and am happy with my choice. I don't use the shadow DOM at all.

The project is Converse.js, an XMPP chat client. It's an old project that was originally created back in 2013 with Backbone.js.

I first replaced all templates with `lit-html` when I first heard about that, and then when lit-element (and now "lit") came out, I started rewriting the project to use that.

This app has since been integrated into many different websites that rely on other frameworks like React and the fact that Converse.js is a web component (<converse-root />) makes this easier.

If you're interested, here's the Github repo: https://github.com/conversejs/converse.js And you can demo it here: https://chat.conversejs.org/

You'll need an XMPP account (see https://providers.xmpp.net/ for possible providers).