@moleculejs/molecule-lit
TypeScript icon, indicating that this package has built-in type declarations

0.13.1 • Public • Published

MoleculeLit

Molecule logo

Build Status Coverage Version License Greenkeeper badge Codacity Badge

Overview

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

This package provides a base class for creating Custom Elements that renders using lit-html.

Installation

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

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

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.

Premade Base Classes

There are several other base classes for Molecule with different rendering methods, like lit-html or JSX. A complete list of official packages for Molecule can be found in the full documentation

Contributing

Coming soon!

Package Sidebar

Install

npm i @moleculejs/molecule-lit

Weekly Downloads

1

Version

0.13.1

License

MIT

Unpacked Size

389 kB

Total Files

12

Last publish

Collaborators

  • diilord