Buckets:

149 MB
6,599 files
Updated 13 days ago
Name
Size
decorators
development
directives
LICENSE1.52 kB
xet
README.md2.31 kB
xet
async-directive.d.ts180 Bytes
xet
async-directive.d.ts.map158 Bytes
xet
async-directive.js86 Bytes
xet
async-directive.js.map99 Bytes
xet
decorators.d.ts724 Bytes
xet
decorators.d.ts.map332 Bytes
xet
decorators.js598 Bytes
xet
decorators.js.map94 Bytes
xet
directive-helpers.d.ts184 Bytes
xet
directive-helpers.d.ts.map162 Bytes
xet
directive-helpers.js90 Bytes
xet
directive-helpers.js.map101 Bytes
xet
directive.d.ts168 Bytes
xet
directive.d.ts.map146 Bytes
xet
directive.js74 Bytes
xet
directive.js.map93 Bytes
xet
html.d.ts150 Bytes
xet
html.d.ts.map134 Bytes
xet
html.js56 Bytes
xet
html.js.map88 Bytes
xet
index.d.ts259 Bytes
xet
index.d.ts.map205 Bytes
xet
index.js157 Bytes
xet
index.js.map89 Bytes
xet
logo.svg1.14 kB
xet
package.json10.8 kB
xet
polyfill-support.d.ts178 Bytes
xet
polyfill-support.d.ts.map160 Bytes
xet
polyfill-support.js3.8 kB
xet
polyfill-support.js.map25 kB
xet
static-html.d.ts167 Bytes
xet
static-html.d.ts.map150 Bytes
xet
static-html.js73 Bytes
xet
static-html.js.map95 Bytes
xet
README.md
Lit

Simple. Fast. Web Components.

Build Status Published on npm Join our Discord Mentioned in Awesome Lit

Lit is a simple library for building fast, lightweight web components.

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.

Documentation

See the full documentation for Lit at lit.dev

Overview

Lit provides developers with just the right tools to build fast web components:

  • A fast declarative HTML template system
  • Reactive property declarations
  • A customizable reactive update lifecycle
  • Easy to use scoped CSS styling

Lit builds on top of standard web components, and makes them easier to write:

import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js';

// Registers the element
@customElement('my-element')
export class MyElement extends LitElement {
  // Styles are applied to the shadow root and scoped to this element
  static styles = css`
    span {
      color: green;
    }
  `;

  // Creates a reactive property that triggers rendering
  @property()
  mood = 'great';

  // Render the component's DOM by returning a Lit template
  render() {
    return html`Web Components are <span>${this.mood}</span>!`;
  }
}

Once you've defined your component, you can use it anywhere you use HTML:

<my-element mood="awesome"></my-element>

Contributing

Please see CONTRIBUTING.md.

Total size
149 MB
Files
6,599
Last updated
Jun 23
Pre-warmed CDN
US EU US EU

Contributors