ContextQMD
Back to Lit

13

packages/lit-dev-content/site/tutorials/content/wc-to-lit/13.md

latest2.0 KB
Original Source

Congratulations!

You've built a "vanilla" web component and converted it to a Lit-based web component!

You've also converted an unreadable <ts-js> <span slot="js">101</span> <span slot="ts">99</span> </ts-js>-line vanilla web component with a 27-line html template to a <ts-js> <span slot="js">75</span> <span slot="ts">68</span> </ts-js>-line Lit-based web component template-and-all!

What's do Lit templates do again?

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!

What does LitElement do again?

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!

What's Next?

You might enjoy our Lit for React Developers Codelab.

Further Reading

Community