Buckets:

150 MB
6,599 files
Updated 2 months ago
Name
Size
decorators
development
LICENSE1.52 kB
xet
README.md2.13 kB
xet
decorators.d.ts724 Bytes
xet
decorators.d.ts.map332 Bytes
xet
decorators.js598 Bytes
xet
decorators.js.map94 Bytes
xet
index.d.ts224 Bytes
xet
index.d.ts.map182 Bytes
xet
index.js138 Bytes
xet
index.js.map89 Bytes
xet
lit-element.d.ts6.18 kB
xet
lit-element.d.ts.map1.05 kB
xet
lit-element.js1.12 kB
xet
lit-element.js.map11.4 kB
xet
package.json7.89 kB
xet
polyfill-support.d.ts1.13 kB
xet
polyfill-support.d.ts.map209 Bytes
xet
polyfill-support.js3.8 kB
xet
polyfill-support.js.map25 kB
xet
private-ssr-support.d.ts883 Bytes
xet
private-ssr-support.d.ts.map197 Bytes
xet
private-ssr-support.js259 Bytes
xet
private-ssr-support.js.map1.09 kB
xet
README.md

LitElement

A simple base class for creating fast, lightweight web components.

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

LitElement is the base class that powers the Lit library for building fast web components.

Most users should import LitElement from the lit package rather than installing and importing from the lit-element package directly.

Documentation

Full documentation is available at lit.dev/docs/components/overview/.

Overview

LitElement is a base class for custom elements that extends the Lit project's core ReactiveElement (from [`@lit/reactive-element'](https://www.npmjs.com/package/@lit/reactive-element)) base class with lit-html templating. ReactiveElement enhances HTMLElement with reactive properties, additional lifecycle callbacks, convenient inline CSS authoring, and a set of useful class decorators, while lit-html provides fast, declarative HTML templating.

Example

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>!`;
  }
}

Contributing

Please see CONTRIBUTING.md.

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

Contributors