A library for creating fast and reactive Custom Elements
Switch branches/tags
Clone or download
DiiLord Merge pull request #24 from Molecule-JS/greenkeeper/rollup-plugin-ter…
…ser-3.0.0

Update rollup-plugin-terser to the latest version 🚀
Latest commit f575bbc Sep 17, 2018

README.md

Molecule · GitHub license codecov npm version Build Status Greenkeeper badge

Overview

Molecule is a JavaScript library for building user interfaces using web components.

It provides several classes from which you can build your Custom Elements

  • The Molecule base class. It is agnositic about your actual templatization and rendering function.
  • MoleculeLit class which uses the standard functions from lit-html by the Polymer team.
  • MoleculeLitExtended uses the extended rendering functions of lit-html.

Installation

The @moleculejs/molecule package can be installed using npm or yarn:

npm install --save @moleculejs/molecule
yarn add @moleculejs/molecule

Documentation

See the full documentation at MoleculeJS.org.

Examples

Let's start with a simple Example:

class HelloWorld extends MoleculeLit.Element {
  static get properties() {
    return {
      name: String,
      attribute: true,
      value: 'John Doe',
    };
  }
  render({ name }) {
    html`
            <div>Hello ${name}</div>
        `;
  }
}

customElements.define('hello-world', HelloWorld);

This creates a new Custom Element called hello-world, which can now be used anywhere in your application using <hello-world>.

This new element will also keep the property name in sync with the attribute name, meaning that the element will look like this in the DOM:

<hello-world name="John Doe"></hello-world>

If you change the attribute or the property, both will be kept in sync and the element will be rerendered.

Contributing

Coming soon!