Converting Your Checkbox to Lit
If you remember from a couple of lessons ago, you wrote your very first web component, the humble checkbox.
The checkbox itself isn’t a particularly complex UI pattern, yet we had to write heaps of boilerplate for it. You had to wrangle with a lot of boilerplate, imperative DOM logic, and gotchas. This problem only grows as you write components with more complex interactions. However, we saw that Lit, a lightweight library, makes writing web components much easier. In fact, the code required to write a counter was reduced by nearly half when migrating from a vanilla web component to a Lit component.
In this lesson you’re going to take everything you’ve learned so far to migrate over your checkbox component to Lit.
Getting started
Jump back into your component-odyssey-library repo that you set up a few lessons back.
Start by navigating into the code directory:
cd code
and install Lit
npm i lit@2.8.0