Lit: a library for building fast, lightweight web components

Web Components is a pretty niche technology and as such it really appeals to some people, and it doesn't appeal to others, and that's okay. You don't have to like it, it isn't meant to be a good fit for everyone. But for some people it might fit really well with their requirements, and they probably have legitimate reasons for that.

If I understand correctly, your criticism is that the people for whom Web Components is a good fit are publicly discussing the reasons why they prefer it over other solutions?

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 don't know if there is a particular benefit, it's just different. On the consumer side there is no difference, because they consume Web Components, and that is what both solutions deliver. On the implementation side, I can think of a few differences:

Vue is more of a "framework" solution and has more things built-in. You can do the same things with Lit, but the implementation would look different, because you'd lean more on native APIs. A good example of that is the event model, Vue has some event model built in, but with Lit you would use EventTarget.dispatchEvent().

Lit is a runtime solution, it doesn't require a build and you can load your source directly in the browser. Vue on the other hand requires some form of compiler stage to produce something your browser can use. Compilers these days are fast, and Lit is specifically engineered to not have runtime performance overhead, so in practice this difference is rather minor. It is a very fundamental difference, so I think it's worth pointing out.

Vue can compile to other targets. If you are only delivering Web Components, this is mostly irrelevant, but in theory a consumer might be able to use the Vue components directly in their Vue project, which might give them a better DX. On the other hand, Lit is specifically designed to produce Web Components, so you'll probably have a bit less friction compares to using Vue, e.g when some Vue concept doesn't compile cleanly to Web Components.

Is there a major benefit to choosing one implementation over the other? I don't think so, unless you have a very particular requirement that one of them addresses that the other doesn't. For nearly all cases, it is just a different implementation syntax.

In most cases the only relevant metric in deciding between them is what technology your developers are more familiar/comfortable with.

Not with paths like 'lit' that is used here.

The example does not use an importmap attribute.

Overall, the example does not seem like something that is supposed to run directly in the browser without some kind of intermediate step.

That is why I asked what the minimal number of steps would be to download the example and have it work locally.