Disclaimer

THIS IS NOT THE LIT-ELEMENT YOU ARE LOOKING FOR!

If you are looking for the lit-element project, you are in the wrong place buddy!

BAIL OUT NOW!

What is this then?

This is a project based on the original lit-element package. This project is the result of (slightly) modifying the output from compiling the project.

I make no promise of maintaining.

Reasoning for this project

This version aims to provide an entirely staticly hosted solution for Web Components using the lit-element interface, without the need for support from the Polymer cli tooling.

I beleive in the web being as static as possible.

The more compiling and tooling we need to create in order to deliver just adds more noise to projects, and raises the bar-for-entry to any new starters. It also creates more time spend, before value can be added.

I also believe the old browsers should die in a tragic, but maybe not so accidental, house fire, that completely obliterated all reference to their source-code. **cough** **cough** Internet Explorer **cough** **cough**

It just so happens, we are moving into an age where the future of JavaScript is now, and even the Edge team are bailing on their hot mess.

We should go back to basics. Learn the standards, and drop the tooling!

LitElement

A simple base class for creating fast, lightweight web components with lit-html. But this time, it's static!

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