Lit: a library for building fast, lightweight web components

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 have a very large axe to grind against web components and Lit, and you show up just about everywhere to make the same comments, but I'll play along anyway:

Yes, Lit templates give some special meaning to attribute names with a few prefixes. No, it's not "HTML-like". It's valid HTML. Not that it matters much. You bring this up all the time but I'm not sure what the actual criticism is. Developers seem to understand the small syntax carve-out just fine.

No, there are no custom JavaScript rules. Templates have some rules. I'm not sure why they wouldn't? In general you can't make things like tag and attribute names dynamic because you can't change them in HTML. You can actually write the template you show with what we call static templates though.

`classMap()` is a template directive. It has some rules about how it's used in templates, just like other JS functions can have rules about how their used. I'm not sure what makes that not a function.

But to your main point: Lit is not like React because it's not a framework. Lit helps you make custom elements - it's an implementation detail of some web components. Everything else about those elements: how you instantiate them, style them, where they work, etc., is all defined by the HTML and DOM standards. React is a framework, and defines its own rules about how its components work.