LitElement 3.0 Pre-release

DO NOT INSTALL THIS

🚨 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.

🚨 Known issues/limitations

• Browser support: This pre-release should run on modern browsers, however a change to factor legacy browser support (IE11, etc.) into an opt-in package is ongoing. As such, this release will not run on some older browsers. This is a temporary state.
• lit-html limitations: Some features of lit-html are still in progress. Please refer to the pre-release README for a list of known lit-html issues.

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

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

• 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 @tanmaymazumdar/lits

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.