Repository with examples and design patterns for building web components using the LitElement base class, and rendering templates using lit-html.

This repository is intended as a starting point for all people who want to write web components with LitElement. Some special sections are added for people migrating from PolymerElement.

You can view the code of the examples by browsing through the src folder on github. The examples are divided into categories of complexity, and are ordered. Concepts are introduced one by one, so that you only see one new concept per example.

All the examples are working code, so you can clone the repository and run npm install + npm start.

People starting with LitElement, especially those coming from PolymerElement, often have these questions:

• How to set default properties:
  • https://github.com/LarsDenBakker/lit-html-examples/blob/master/src/1-basic/04-default-property.js
• How to handle conditional logic (dom-if from PolymerElement):
  • https://github.com/LarsDenBakker/lit-html-examples/blob/master/src/1-basic/09-conditional-logic.js
  • https://github.com/LarsDenBakker/lit-html-examples/blob/master/src/2-intermediate/08-conditional-templates.js
• How to repeat templates (dom-repeat from PolymerElement):
  • https://github.com/LarsDenBakker/lit-html-examples/blob/master/src/1-basic/10-repeat-templates.js
  • https://github.com/LarsDenBakker/lit-html-examples/blob/master/src/2-intermediate/11-dynamic-repeated-templates.js
• How to compute properties (computed properties from PolymerElement)
  • https://github.com/LarsDenBakker/lit-html-examples/blob/master/src/2-intermediate/01-computed-properties.js
• How to observe property changes (property observers from PolymerElement)
  • https://github.com/LarsDenBakker/lit-html-examples/blob/master/src/2-intermediate/07-updated.js
  • https://github.com/LarsDenBakker/lit-html-examples/blob/master/src/3-advanced/01-property-setter-observer.js
• How to render templates from external sources, such as a back-end API or html files imported through webpack
  • https://github.com/LarsDenBakker/lit-html-examples/blob/master/src/3-advanced/07-external-template.js
• How to separate CSS, HTML and JS in different files:
  • https://github.com/LarsDenBakker/lit-html-examples/blob/master/src/3-advanced/09-separate-css-html-js-element.js
• How to reflect properties to attributes:
  • https://github.com/LarsDenBakker/lit-html-examples/blob/master/src/2-intermediate/12-reflect-property-to-attribute.js

• Use https://github.com/web-padawan/awesome-lit-html as a starting pointer for further documentation.
• Use https://github.com/thepassle/create-lit-app as a reference for building a lit-html app with preset and ready to use Redux and Webpack configurations.

This project is a community effort. The authors of this repository are not affiliated with Google or the Polymer team. Because LitElement and lit-html are still in early stages of development, best practices and examples will change and evolve over time.

Contributions are appreciated, feel free to submit issues and PRs.