HN Reader

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.

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 :)

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).

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.

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.

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.

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'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?

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...

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.

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.

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

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.

I used lit for a few small components on my blog, https://pdx.su, and have mostly ignored them since writing them two years ago. When I recently had to update them with a new feature, I was extremely pleased that the usual js experience of finding out that I was a million versions behind wasn't there.

I looked at lit but chose JSX.

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

You can also use Web Components directly and manipulate them like regular HTML elements, no need to add a framework. Even using Shadow DOM isn't required.

Typescript can even add Intellisense to "customElements.get" by augmenting CustomElementRegistry: https://gist.github.com/cecilemuller/72fbb3bc3a77d82c8a969cd...

I used lit for a project a couple years ago, and loved it. It had some warts, mostly around working with React components and the Shadow DOM. But it's barebones IIRC. One of the things I loved about it was that it was focused on implementing and using WebComponents via the standard, rather than re-inventing all their own thing.

My 3d bin packer is written with lit and F#

https://3dpack.ing

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#...

“You got Lit up!”

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 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 love lit. I've been using lit in production since 2020 and I have never looked back. There is so much to say about lit, but I think the biggest win is that it's built on a very stable foundation. Building apps on top of native web components coupled with all the modern QoL features with Lit allows me to without the fear of some new framework/update coming along to the ecosystem - which in the FE world means the last X years worth of code becomes outdated. Native web components are a stable feature in all browsers and I can just focus on building - more engineering teams need to give it a try

If you're curious about lit and like longer form content - I recommend watching the [0] http 203 video that talks about lit element and other tools like it

[0] - https://www.youtube.com/watch?v=uCHZJy2n8Qs

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

I’ve been incredibly lucky to spend about 6 years of the last decade NOT having to suffer through React, and I owe it all to Lit.

Using other frameworks to set up web view’s just don’t feel the same by comparison. I just want nested web components, and I just want Lit to help me define them. Tagged template literals for constructing HTML feels so much better than suffering through JSX.

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

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.

So let me get this straight: HTML was originally built to have markup and style both in the same containers, and it was clunky and hard to maintain, so CSS was invented, to abstract away the styles so that content and style could be separate. And that worked pretty well. And then someone came along and said: you know what would be great? Removing all the useful abstractions and going back to the HTML 1.0 way of putting it all in one container. And rewriting HTML in JavaScript to make it less maintainable. And so on. Am I getting this right? Correct me if I'm wrong.

Is the better DX using lit worth the price having to deal with another library? I thought webcomponents came to enable native components and now we need another library

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.

(Formerly lit-element)

Love Lit. I've pushed hard for Web Components at work for a while now with some success (the shine is definitely coming off of Angular for a lot of people there) and I've only used Lit to build my personal projects for a long time.

I love it when I visit one of my pages and use Lighthouse to check it out and have nearly straight across 100 scores. Also, I usually have really great performance on phones as well because the pages are so light and quick to render.

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

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