HN Distilled

Essential insights from Hacker News discussions

Lit: a library for building fast, lightweight web components

Original Article

Hacker News Discussion

Here's a summary of the themes from the Hacker News discussion:

Positive Reception and Wide Adoption of Lit

Many users expressed strong satisfaction with Lit, highlighting its effectiveness and broad adoption across significant projects. Its ability to abstract over the Web Components API was frequently praised, making it more approachable and practical than bare Web Components.

  • "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." - zacian
  • "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." - mdhb
  • "Also Reddit!" - CharlieDigital
  • "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." - kavaruka
  • "Same here. I have actually wrote a few web components by hand in an environment where I didn't want any external dependencies and when that requirement was dropped I really liked how easy was to convert them to LitElement (and how much nicer it is to work with them)." - selectnull
  • "For the frontend work that I did, Lit was a godsend. It really helps you build components and apps without getting in the way." - kubb
  • "I made a state management lib for Lit, that's just as lightweight (258 lines) and intuitive: [link]. I've used it extensively myself, for creating complex web apps with many (nested) components interacting with each other." - gitaarik
  • "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." - gitaarik
  • "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 + Web Components when I want client-side rendering." - sibit
  • "I've used 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." - moxvallix
  • "Here just to say thank you for Lit! It is a real pleasure to use (for simple and complex use-case)." - krikou

Debate and Concerns Around Decorators

A significant portion of the discussion revolved around the use of decorators in JavaScript and how Lit employs them. While some view them as a helpful, declarative way to metaprogram class fields, others expressed strong reservations due to their non-standard status in JavaScript and potential for inconsistency.

  • "Great project but I can't stand syntax such as decorators." - epolanski
  • "They are optional for what it’s worth. They are also landing in standard JS soon." - mdhb
  • "The proposal is stuck at stage 3. AFAIK, to proceed to stage 4, it needs two independent implementations, but Firefox [0] and Chromium [1] didn't see any progress in this area for about a year. Personally, after working with Angular for many years, that's not a language feature I am looking forward to." - Klaster_1
  • "Just to add to a sibling comment, they are optional and not in a “optional but if you dont use them it really sucks” kind of way." - skrebbel
  • "Decorators are the only way to metaprogram over class fields in JS. Otherwise they're not even detectable on the prototype." - jfagnani
  • "We use them to make fields reactive mostly, and I love how declarative they are. But we use them sparingly. I personally don't love how some libraries try to put a lot of things into decorators that could have been standard class features, like a static field or a method." - jfagnani
  • "As mentioned by skrebbel, decorators are optional. Every decorator has a simple plain-JS way of doing it. Event reactive properties: [link]" - jfagnani
  • "I can think about few other ways, such as using higher order functions/classes, using getOwnPropertyDescriptor or doing stuff at construction." - epolanski
  • "This is not a pro, it's a con. The more ways there are to achieve the same result the more inconsistent projects become IRL." - epolanski
  • "Also, do you really want to metaprogram at all? What's the huge benefit of that approach?" - epolanski
  • "There really is no way to metaprogram against class fields except with decorators. Class fields aren't on the prototype. They’re essentially Object.defineProperty() calls that occur right after the super() call of a constructor. You can't get at them at all from the class declaration." - jfagnani
  • "No, they are not. Decorators don't even exist in JavaScript. Stop assuming typescript isJavascript or even worse, that everybody is on board." - brazukadev

Lit's Relationship with Web Components and Other Frameworks

There's a clear discussion about Lit's positioning relative to native Web Components and established JavaScript frameworks like React and Angular. While Lit is often presented as a library that enhances Web Components, some users see it as evolving into a framework itself. Criticisms were raised about the perceived hostility of some Lit proponents towards other frameworks, while proponents defended Lit's adherence to standards and its distinct nature from full-blown frameworks.

  • "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." - jfagnani
  • "Yes, Web Components are almost 15 years now, and they still struggle with the most basic of things. How's that abandoned roadmap going?" - troupo
  • "The criticism is usual: Lit is rapidly absorbing all the features from all the other frameworks and becoming a framework itself while many of its developers and proponents can't stop shitting all over other frameworks." - troupo
  • "As a third party I can't help but notice that the only one doing the "shitting" here, is you." - mariusor
  • "Take this as some constructive feedback that you really come across as a miserable bastard to everyone reading your comments." - mdhb
  • "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." - Ruphin
  • "I recognize you too. I also don't understand your obsession with trolling on Lit and Web Components. You keep coming with the same arguments. And always very emotional. I get the feeling that it is something personal that you have against Lit / Web Components. And you're clearly a hater, and haters are gonna hate regardless of whatever happens." - gitaarik
  • "I think web components already compete extremely well for application development, and you see very complex apps built with Lit out there: Photoshop, Firefox, Chrome OS, Chrome DevTools." - jfagnani
  • "What people using web components want is to get rid of shadowDOM and not feel like they are deviating from the correct path. shadowDOM sucks, stop trying to convince the world that we are using it wrong. shadowDOM is the whole reason web components did not become mainstream (yet?)." - brazukadev
  • "Lit has always been designed partially as a prototype for where web component standards could go in the future. That's a big reason Lit is fairly conservative and un-opinionated. It doesn't try to undo or paper-over any of the DOM APIs, but add to them instead." - jfagnani
  • "React is designed for the old browser capabilities, and is now staying around by inertia, not by inherent quality." - kubb
  • "No shadow DOM, no web components, no template strings, etc." - kubb
  • "Funny you should say that when the current advise for web components is to avoid Shadow DOM (almost like the plague)" - troupo
  • "The browser supports module imports. But your script must be of type ”module”:" - fmbb
  • "Not with paths like 'lit' that is used here." - TekMol
  • "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." - TekMol

Shadow DOM Perceptions and Usability

The use and perception of Shadow DOM within Web Components and by extension Lit, generated significant discussion. While Shadow DOM is a core Web Component feature, some users find it problematic, particularly concerning accessibility and styling, and express a desire for alternatives or less strict adherence to it.

  • "I also have embraced the shadow DOM which is a default, but I think it's more trouble than it's worth. Now I use LitElement without shadow DOM and it works great as well." - selectnull
  • "Same about the shadowDOM. The only criticism I have about Lit is that the creators think shadowDOM is amazing and people not liking it are using it wrong. Lit lacks a good direction and someone with vision leading it but it became the technical pet project of a few." - brazukadev
  • "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." - Muromec
  • "What people using web components want is to get rid of shadowDOM and not feel like they are deviating from the correct path. shadowDOM sucks, stop trying to convince the world that we are using it wrong. shadowDOM is the whole reason web components did not become mainstream (yet?)." - brazukadev
  • "Funny you should say that when the current advise for web components is to avoid Shadow DOM (almost like the plague)" - troupo
  • "No shadow DOM" - kubb
  • "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." - Muromec

Future of Web Component Standards and Lit's Role

There's an ongoing conversation about the evolution of Web Component standards and Lit's potential influence or anticipation of these changes. Lit maintainers see the library as a prototyping ground for future standards, while others discuss emerging proposals like native signals and templating APIs, and whether Lit itself will be absorbed or made obsolete by these advancements.

  • "Lit has always been designed partially as a prototype for where web component standards could go in the future." - jfagnani
  • "There is a proposal in TC39 for native signals, which I think would make a huge dent towards library-less reactivity." - jfagnani
  • "I'm also working on a proposal for native reactive templating which would more-or-less obsolete lit-html. I wrote about the idea some on my blog: [links]" - jfagnani
  • "Which originated (or the modern versions of signals originated) in Solid, not in Lit." - troupo
  • "I hope there can be ways without JS to populate templates with data - autoloaded from sources. This would tremendously increase the number of JS free web-sites." - lenkite
  • "Lit is nice because there's a very straightforward progression from web components. Preommr"
  • "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." - o_m
  • "Native web component APIs don't have the DX that many people expect though, because they are so low-level. Lit provides just that declarative reactivity on top." - jfagnani