Back to Lit

00

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

latest1.3 KB
Original Source

Web Components

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets built on the web component standards will work across modern browsers and can be used with any JavaScript library or framework that works with HTML.

Lit

Lit is a library for creating fast, lightweight web components that work in any web page with any framework.

Lit provides APIs to simplify common web components tasks like managing properties, attributes, and rendering.

What you'll Learn

  • What is a web component
  • How to build a web component
  • What is Lit
  • How to build a Lit component

{% aside "warn" %}

Getting started with lit?

This tutorial focuses on the web components specifications and how Lit works under the hood to help you build web components more easily. For a more general introduction to Lit, take a look at the Lit docs or other tutorials.

{% endaside %}

What you’ll build

  • A vanilla thumbs up / down web component
  • A thumbs up / down LitElement-based web component

{% aside "positive" %}

Already know the basics of web components?

Skip to Lit templates, to see how Lit can help!

{% endaside %}