element-js

Simple and lightweight base classes for web components with a beautiful API. Dependency free.

Introduction

element-js lets you write simple, declarative and beautiful web components without the boilerplate.

How to use

Installation

install element-js

npm install --save @webtides/element-js

Use / Example Element

element-js elements are plain ES6 classes (vanilla JS) with some nice mappings (eg. properties, watch, etc.).

// Import from a CDN
// import { BaseElement, defineElement } from 'https://unpkg.com/@webtides/element-js';
// import { BaseElement, defineElement } from 'https://cdn.skypack.dev/@webtides/element-js';
// or when installed via npm
import { BaseElement, defineElement, Store } from '@webtides/element-js';

const sharedDate = new Store({ date: Date.now() });

class ExampleElement extends BaseElement {
    // normal public properties
    greeting = 'Hello';
    name = 'John';

    // lifecycle hook
    connected() {
        this.greet();
    }

    // reactive attributes/properties
    properties() {
        return {
            familyName: 'Doe',
            sharedDate
        };
    }

    // watchers for property changes
    watch() {
        return {
            familyName: (newValue, oldValue) => {
                console.log('familyName changed', newValue, oldValue);
            }
        };
    }

    // computed property
    get computedMsg() {
        return `${this.greeting} ${this.name} ${this.familyName} ${this.sharedDate.date}`;
    }

    // method
    greet() {
        alert('greeting: ' + this.computedMsg);
    }
}
defineElement('example-element', ExampleElement);

To use this element, just import it and use it like any other HTML element

<script type="module" src="example-element.js" />
<example-element family-name="Smith"></example-element>

Documentation

For detailed documentation see the Docs.

Contributing & Development

For contributions and development see contributing docs

License

element-js is open-sourced software licensed under the MIT license.