LitElement Single File Component loader for Webpack.
Branch: master
Clone or download
LasaleFamine Merge pull request #29 from PolymerX/greenkeeper/codecov-3.2.0
Update codecov to the latest version 🚀
Latest commit afc8aac Feb 13, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
src update for lit-element 2.0 Jan 22, 2019
test update for lit-element 2.0 Jan 22, 2019
.editorconfig first push May 18, 2018
.gitattributes first push May 18, 2018
.gitignore first push May 18, 2018
.npmrc first push May 18, 2018
.travis.yml first push May 18, 2018
.yarnrc first push May 18, 2018 chore(release): 0.1.0 Jan 22, 2019
LICENSE first push May 18, 2018 chore: update readme, removing experimental badge Jan 22, 2019
package.json chore(package): update codecov to version 3.2.0 Feb 13, 2019
yarn.lock chore(package): update lockfile yarn.lock Feb 13, 2019


Build Status codecov Greenkeeper badge


Single File Component LitElement loader for Webpack

Example repository

Checkout the working repository for a more comprehensive example:


Because we love separation of concerns also without separation of files! This loader will produce a Web Component using the LitElement starting from a Single File Component, like Vue.


The loader does a simple job: take your .lit file and build up as single js file. And you can easily use PostCSS on your styles.


$ yarn add --dev lit-loader


Add to Webpack

Add the loader to your Webpack conf webpack.config.js:


module: {
    rules: [
        test: /\.lit$/,
        loader: 'lit-loader'


Create your first .lit element


<style lang="postcss"> <!-- This will enable PostCSS compilation -->
  span {
    width: 20px;
    display: inline-block;
    text-align: center;
    font-weight: bold;

      Clicked: <span>${this.clicks}</span> times.
      Value is <span>${this.value}</span>.
      <button @click="${this._onIncrement}" title="Add 1">+</button>
      <button @click="${this._onDecrement}" title="Minus 1">-</button>

  export default class CounterElement {
    static get properties() { return {
      clicks: Number,
      value: Number

    constructor() {
      this.clicks = 0;
      this.value = 0;

    _onIncrement() {
      this.dispatchEvent(new CustomEvent('counter-incremented'));

    _onDecrement() {
      this.dispatchEvent(new CustomEvent('counter-decremented'));

  window.customElements.define('counter-element', CounterElement);

Import it within another element and use it


import {LitElement, html} from 'lit-element';


import './CounterElement.lit';

export default class MyApp extends LitElement {

	_render(props) {
		return html`



Use with Babel

Just chain the babel-loader AFTER the lit-loader like so:

module: {
    rules: [
        test: /\.lit$/,
        use: ['babel-loader', 'lit-loader']

PostCSS configuration

You need to add a PostCSS configuration file (postcss.config.js) if you want to use it.

Current status

I think this should be considered experimental and I will try to improve it as much as I can. I really would love to accept some PR's to improve the project. 🤘


MIT © LasaleFamine