You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
Justin Fagnani 2b398727da
Prepare 2.5.1 release (#1193)
3 months ago
.github Prepare 2.5.0 release (#1190) 3 months ago
demo Adds `static get styles()` 3 years ago
docs Update social media links, README. (#1188) 3 months ago
src Prepare 2.5.1 release (#1193) 3 months ago
test Support new decorators proposal as implemented in Babel 7 (#422) 3 years ago
.babelrc Support new decorators proposal as implemented in Babel 7 (#422) 3 years ago
.clang-format Add version global (#536) 3 years ago
.gitignore Prepare 2.5.0 release (#1190) 3 months ago
.npmignore Use downlevel-dts, test compile in TS 3.4 (#936) 1 year ago
.travis.yml update .travis.yml (#876) 2 years ago
CHANGELOG.md Prepare 2.5.1 release (#1193) 3 months ago
CONTRIBUTING.md Prepare 2.5.0 release (#1190) 3 months ago
LICENSE Add explicit LICENSE file 3 years ago
README.md Remove leading indentation from README code snippets. (#984) 3 months ago
check-version-tracker.cjs Set type in package.json to "module" 12 months ago
package-lock.json Prepare 2.5.1 release (#1193) 3 months ago
package.json Prepare 2.5.1 release (#1193) 3 months ago
rollup.config.js Update to Rollup v1 (#785) 2 years ago
travis-bench.sh Add tachometer integration to lit-element Travis 2 years ago
tsconfig.json Remove almost all uses of `any`. (#457) 3 years ago
tsconfig_apidoc.json Update API doc script. 3 years ago
tslint.json Remove unnecessary type assertions (#599) 2 years ago
typedoc.json Minor API doc improvements. 1 year ago
wct.conf.json Extract WCT configuration to wct.conf.json 3 years ago

README.md

LitElement

LitElement is simple base class for creating fast, lightweight web components with lit-html.

Build Status Published on npm Join our Slack Mentioned in Awesome lit-html

Looking for Lit?

LitElement is now part of the Lit library monorepo. Lit 2 includes lit-html 2.x and LitElement 3.x.

This repo contains the code for LitElement 2.x.

Documentation

For LitElement 2.x documentation, see the legacy documentation site.

For Lit 2, the next version of LitElement and lit-html, see the Lit site.

Overview

LitElement uses lit-html to render into the element's Shadow DOM and adds API to help manage element properties and attributes. LitElement reacts to changes in properties and renders declaratively using lit-html. See the lit-html guide for additional information on how to create templates for lit-element.

import {LitElement, html, css, customElement, property} from 'lit-element';

// This decorator defines the element.
@customElement('my-element')
export class MyElement extends LitElement {

  // This decorator creates a property accessor that triggers rendering and
  // an observed attribute.
  @property()
  mood = 'great';

  static styles = css`
    span {
      color: green;
    }`;

  // Render element DOM by returning a `lit-html` template.
  render() {
    return html`Web Components are <span>${this.mood}</span>!`;
  }

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

Note, this example uses decorators to create properties. Decorators are a proposed standard currently available in TypeScript or Babel. LitElement also supports a vanilla JavaScript method of declaring reactive properties.

Examples

Installation

From inside your project folder, run:

$ npm install lit-element

To install the web components polyfills needed for older browsers:

$ npm i -D @webcomponents/webcomponentsjs

Supported Browsers

The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.

Edge and Internet Explorer 11 require the web components polyfills.

Forward Compatibility With Lit 2

Lit 2 (LitElement 3.0) has a few breaking changes and deprecations that have been back-ported to LitElement 2.5 in order to ease upgrading.

To prepare for Lit 2, update these APIs:

LitElement 2.4 LitElement 2.5/Lit 2
Decorator imports:
import {customElement} from 'lit-element';
import {customElement} from 'lit-element/decorators.js';
@internalProperty() foo; @state() foo;
Override _getUpdateComplete() Override getUpdateComplete()
Shadow root options:
Override createRenderRoot().
Add static shadowRootOptions.
import {UpdatingElement} from 'lit-element'; import {ReactiveElement} from 'lit-element';

Contributing

Please see CONTRIBUTING.md.