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';
@customElement('my-element')
export class MyElement extends LitElement {
@property()
mood = 'great';
static styles = css`
span {
color: green;
}`;
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.
Contributing
Please see CONTRIBUTING.md.