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.
install element-js
npm install --save @webtides/element-js
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() {
this.greet();
}
// 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.
For contributions and development see contributing docs
element-js
is open-sourced software licensed under the MIT license.