You've built a "vanilla" web component and converted it to a Lit-based web component!
You've also converted an unreadable 101 99-line vanilla web component with a 27-line html template to a 75 68-line Lit-based web component template-and-all!
Lit's rendering system does the following:
- Efficiently renders and updates DOM.
- Enables you to easily package your template with your component.
- Allows you to write templates without the need for a compiler.
- Enables you to write readable, declarative templates and code with special binding syntax.
- And much more!
LitElement, Lit's web component base class does the following:
- Handles converting attributes to properties.
- Handles reflecting properties back into attributes.
- Provides a render and re-render reactive lifecycle.
- Handles your re-renders efficiently and asynchronously.
- And does all of this without a build and only ~5kb lines of code!
LitElement also enables many more advanced features as the Lit team & community has been building an ecosystem of tooling around it. Learn more by reading the Lit Documentation!
You might enjoy our Lit for React Developers Codelab.