Last updated Aug 12, 2021
Written by Elliott Marquez
Last Updated: 2021-08-10
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 is a simple library for building fast, lightweight web components that work in any framework, or with no framework at all. With Lit you can build shareable components, applications, design systems, and more.
Lit provides APIs to simplify common Web Components tasks like managing properties, attributes, and rendering.
What is a Web Component
The concepts of Web Components
How to build a Web Component
What are lit-html and LitElement
What Lit does on top of a web component
A vanilla thumbs up / down Web Component
A thumbs up / down Lit-based Web Component
Any updated modern browser (Chrome, Safari, Firefox, Chromium Edge). Web Components work in all modern browsers and polyfills are available for Microsoft Internet Explorer 11 and non-chromium Microsoft Edge.
Knowledge of HTML, CSS, JavaScript, and Chrome DevTools.