LitElement Hello World with Webpack

I created a GitHub repo of a basic “Hello World” LitElement view with Webpack (hot module reload and decorators). I only uploaded this because there seems to be no official documentation of setting up LitElement with webpack, and there are very few other resources.

Anyways you can check out the GitHub repo here: https://github.com/JeremyBernier/lit-element-webpack-hello-world

Below is the description:


LitElement is a cool library for creating web components. The problem is, the documentation sucks.

For example the home page example is literally just a “Hello World” that shows you nothing about how to change state or handle button clicks (Polymer team: please look at React’s homepage for an example of how a library’s homepage should look).

Nowhere in the documentation does it tell you how to set things up with webpack, instead telling you to simply use polymer serve. And getting things set up with Webpack with decorators is surprisingly time-consuming due to this bug with babel decorators.

I created this repo to 1. show a simple example of Lit-Element that’s less worthless than “Hello World” 2. save you from the hassle of having to set up the webpack config.

The webpack config however is extremely simple and not meant for production. But at least with this basic working config, it should be easy to extend and get it to that point.

I’ll probably update this repo to make things more complete as I learn more (still new to Lit-Element).