Web Components in Easy Mode
https://webcomponent.io
| assets | ||
| demo | ||
| .gitignore | ||
| index.mjs | ||
| package.json | ||
| README.md | ||
| WebComponent.mjs | ||
Web Component Base
This is a very minimal base class for creating reactive custom elements easily.
When you extend the WebComponent class for your component, you only have to define the template() and observedAttributes(), and changes in any attribute value will automatically cause the UI to render.
The result is a reactive UI on attribute changes.
Installation
npm i web-component-base
Usage
In your component class:
// HelloWorld.mjs
import WebComponent from "web-component-base";
export class HelloWorld extends WebComponent {
name = "World";
emotion = "excited";
static get observedAttributes() {
return ["name", "emotion"];
}
get template() {
return `
<h1>Hello ${this.name}${this.emotion === "sad" ? ". 😭" : "! 🙌"}</h1>`;
}
}
customElements.define('hello-world', HelloWorld);
In your HTML page:
<head>
<script type="module" src="HelloWorld.mjs"></script>
</head>
<body>
<hello-world name="Ayo" emotion="sad">
<script>
const helloWorld = document.querySelector('hello-world');
setTimeout(() => {
helloWorld.setAttribute('emotion', 'excited');
}, 2500)
</script>
</body>
The result is a reactive UI that updates on attribute changes:
Hooks
Currently, you can define behavior when an attribute value changes by defining a method onChanges in your component:
import WebComponent from "../index.mjs";
export class HelloWorld extends WebComponent {
name = "World";
emotion = "excited";
static get observedAttributes() {
return ["name", "emotion"];
}
onChanges({ previousValue, currentValue }) {
console.log(">>> changed", { previousValue, currentValue });
}
get template() {
return `
<h1>Hello ${this.name}${this.emotion === "sad" ? ". 😭" : "! 🙌"}</h1>`;
}
}