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.

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.

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

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

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.

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.

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

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

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

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.

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

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

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

https://benoitessiambre.com/vanilla.html

My editor: https://needcoolershoes.com

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.

- Custom HTML-like syntax

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

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

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

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

https://3dpack.ing

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

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

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?