LitElement 3.0 Pre-release

🚨 About this pre-release

This is a major version pre-release of LitElement 3.0. See issue #1077 for the full list of changes planned/considered for this release.

This pre-release is not yet feature complete or API stable. Please note the breaking changes, known issues, and limitations below, and use at your risk until the stable release is available. Issues are welcome for unexpected changes not noted below or in the changelog.

🚨 Breaking changes

While LitElement 3.0 is intended to be a mostly backward-compatible change for the majority of 2.x users, please be aware of the following notable breaking changes:

• This LitElement pre-release uses the lit-html pre-release as well. Please see the lit-html pre-release README and changelog for information on any breaking changes to lit-html features in your components.
• Decorators are no longer exported from the top-level lit-element module. Instead, import any decorators you use from lit-element/decorators/*.
• requestUpdate() no longer returns a Promise. Instead await the updateComplete Promise.

See the full changelog for more details on these and other minor breaking changes.

LitElement

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

Documentation

Full documentation is available at lit-element.polymer-project.org.

Overview

Note, the LitElement package has been replaced by the lit package. LitElement is provided only for backwards compatibility; when possible, users should upgrade to the lit package.

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} from 'lit-element';
import {customElement, property} from 'lit-element/decorators.js';

// 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

• Runs in all supported browsers: Glitch

• Runs in browsers with JavaScript Modules: Stackblitz, JSFiddle, JSBin, CodePen.

• You can also copy this HTML file into a local file and run it in any browser that supports JavaScript Modules.

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

Development mode

lit-element includes a development mode which adds additional checks that are reported in the console.

To enable development mode, add the development exports condition to your node resolve configuration.

@web/dev-server

{
  nodeResolve: {
    exportConditions: ['development'],
  }
}

Rollup

{
  plugins: [
    nodeResolve({
      exportConditions: ['development'],
    }),
  ],
}

Webpack

NOTE: Requires Webpack v5

{
  resolve: {
    conditionNames: ['development'],
  }
}

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 and the polyfill-support module included in this package.

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="node_modules/lit-element/polyfill-support.js"></script>
<!-- load application code -->

Contributing

Please see CONTRIBUTING.md.