DEV Community

Discussion on: Let's Build Web Components! Part 5: LitElement

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

Hi John, thanks for the kind words

Yes, I do consider LitElement to be the best option for making web components in September 2020, for these reasons:

  1. it's 'close to the platform'.
  2. it's relatively simple and easy to understand
  3. it's widely adopted
  4. the community

Platform

Of all the major ways to make a web component that I'm aware of, LitElement strikes the best balance between providing features the web platform doesn't (reactive updates, data->ui templating), while still respecting and leaning on existing APIs. A LitElement factors, reads, and behaves exactly what it is - a spicy HTMLElement.

That also means that more of the knowledge you gain from working with LitElement is transferable. I've often had the experience working with developers familiar with a certain popular web framework of them asking me about "how to do X with lit", only to realize after considering their question that they really wanted to know how to do X with the DOM, or CSS, or JavaScript.

To be certain, LitElement has some opinions of its own, notably asynchronous rendering and updateComplete (which is actually kind of a super power), and you'll have fun getting to know how to take advantage of them, but most of the action here is web standards.

Simplicity

To paraphrase @webpadawan - when Vaadin was evaluating LitElement for adoption, one of the selling points for them was that it was simple enough to grok on its own that if they ever needed to, they could fork and maintain their own version without too much trouble. lit-html and LitElement have relatively few moving parts. With some dedication and a pot of coffee, you could probably get through the codebase in an afternoon. The github.com/Polymer/lit-element has about ~1700 lines of idiomatic TypeScript. github.com/Polymer/lit-html has about 3471 (2080 if you don't count the directives). And the next major versions will be smaller and faster, with more stuff opt-in.

Adoption

I'm unfortunately still aware that a certain type of personality in the industry would prefer we all think that no one's using web components, but they're gaining adoption among small and large companies. Now, npm download stats don't tell us as much as we think they do, but nonetheless, lit-element is gaining on its peers

Community

Come join us in the Polymer Slack (I know, slack... what can we do). It's a welcoming, helpful and passionate community.

TL;DR

So yeah, LitElement is where it's at, and I hope you have a tonne of fun learning and using it.

Collapse
 
jwp profile image
John Peters • Edited

Just curious Benny; how long have you been working with it?

It just seems almost too good to be true, but then again it's coming from the strong folks at Google, who have more than proved themselves with Angular and other things like the V8 Engine and Node.js.

I liked React in the beginning but not so much now. I think it's highly opinionated.

Thread Thread
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦 • Edited

I've been using web components since polymer 1. You can think of LitElement like polymer 4.

I liked React in the beginning but not so much now. I think it's highly opinionated

With LitElement and a nice modern toolchain your going to get a very similar developer experience, but with less overhead.

Check out modern-web.dev and open-wc.org for more