6 Lit library

If you worked through chapter 3, you know that building vanilla web components is entirely doable. But you probably also noticed that it involves a fair amount of boilerplate code. That includes observing attributes, wiring up reflection between attributes and properties, and managing when a component should re-render. It all works, but after the third or fourth component you start thinking, "There has to be a better way." I’m happy to report that there is, and it’s called Lit.

Lit is a lightweight library from Google for implementing web components and is the successor to the earlier Polymer library. It keeps you close to the web platform you already know, while quietly handling the tedious parts for you. Think of Lit as a power tool for web components. It doesn’t change what you’re building, it just makes the building dramatically faster, often with about half the code of an equivalent vanilla web component. The code has clearer intent and fewer places for bugs to hide. Because Lit sticks so close to the standards, almost everything you learned in chapters 3 and 4 carries right over.

6.1 Project creation

6.2 Components

6.3 Lit Decorators

6.3.1 @customElement decorator

6.3.2 @property decorator

6.3.3 @state decorator

6.3.4 Decorators to query the shadow DOM

6.3.5 @eventOptions decorator

6.4 Lifecycle hooks

6.5 Event handling

6.6 Radio group

6.7 Reactive CSS

6.8 State

6.8.1 Context object

6.8.2 hello-world component

6.8.3 labeled-input component

6.9 Sortable table

6.10 Summary