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

Usage no npm install needed!

<script type="module">
  import webtidesElementJs from 'https://cdn.skypack.dev/@webtides/element-js';



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


element-js lets you write simple, declarative and beautiful web components without the boilerplate. It uses lit-html for rendering.

How to use


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 } from '@webtides/element-js';

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

    // lifecycle hook
    connected() {

    // reactive attributes/properties
    properties() {
        return {
            familyName: 'Doe'

    // 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}`;

    // 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>


For detailed documentation see the Docs.

Contributing & Development

For contributions and development see contributing docs


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