1 | <img src="./logo.svg" alt="Lit" width="300" height="141">
|
2 |
|
3 | ### Simple. Fast. Web Components.
|
4 |
|
5 | [![Build Status](https://github.com/lit/lit/actions/workflows/tests.yml/badge.svg)](https://github.com/lit/lit/actions/workflows/tests.yml)
|
6 | [![Published on npm](https://img.shields.io/npm/v/lit.svg?logo=npm)](https://www.npmjs.com/package/lit)
|
7 | [![Join our Slack](https://img.shields.io/badge/slack-join%20chat-4a154b.svg?logo=slack)](https://lit.dev/slack-invite/)
|
8 | [![Mentioned in Awesome Lit](https://awesome.re/mentioned-badge.svg)](https://github.com/web-padawan/awesome-lit)
|
9 |
|
10 | Lit is a simple library for building fast, lightweight web components.
|
11 |
|
12 | At Lit's core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that's tiny, fast and expressive.
|
13 |
|
14 | ## Documentation
|
15 |
|
16 | See the full documentation for Lit at [lit.dev](https://lit.dev)
|
17 |
|
18 | ## About this release
|
19 |
|
20 | This release candidate of Lit 2.0 is intended to be feature complete and API stable. Please note the minor breaking changes from lit-element 2.0 and lit-html 1.0 in the [lit.dev upgrade guide](https://lit.dev/docs/releases/upgrade/).
|
21 |
|
22 | ## Overview
|
23 |
|
24 | Lit provides developers with just the right tools to build fast web components:
|
25 |
|
26 | - A fast declarative HTML template system
|
27 | - Reactive property declarations
|
28 | - A customizable reactive update lifecycle
|
29 | - Easy to use scoped CSS styling
|
30 |
|
31 | Lit builds on top of standard web components, and makes them easier to write:
|
32 |
|
33 | ```ts
|
34 | import {LitElement, html, css} from 'lit';
|
35 | import {customElement, property} from 'lit/decorators.js';
|
36 |
|
37 | // Registers the element
|
38 | @customElement('my-element')
|
39 | export class MyElement extends LitElement {
|
40 |
|
41 | // Styles are applied to the shadow root and scoped to this element
|
42 | static styles = css`
|
43 | span {
|
44 | color: green;
|
45 | }
|
46 | `;
|
47 |
|
48 | // Creates a reactive property that triggers rendering
|
49 | @property()
|
50 | mood = 'great';
|
51 |
|
52 | // Render the component's DOM by returning a Lit template
|
53 | render() {
|
54 | return html`Web Components are <span>${this.mood}</span>!`;
|
55 | }
|
56 | }
|
57 | ```
|
58 |
|
59 | Once you've defined your component, you can use it anywhere you use HTML:
|
60 |
|
61 | ```html
|
62 | <my-element mood="awesome"></my-element>
|
63 | ```
|
64 |
|
65 | ## Contributing
|
66 |
|
67 | Please see [CONTRIBUTING.md](./CONTRIBUTING.md).
|