| .vscode | ||
| assets | ||
| demo | ||
| .gitignore | ||
| index.mjs | ||
| package.json | ||
| README.md | ||
| WebComponent.mjs | ||
TLDR; See quick start example you can copy-paste and modify
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.
Table of Contents
- Vanilla JS import
- Installation
- Usage
- Minimal Example - Quick start you can copy-paste 😉
- Life-Cycle Hooks
Vanilla JS import
Import using unpkg in your component. We will use this in the rest of our usage examples.
import WebComponent from "https://unpkg.com/web-component-base";
Installation
If you have a bundler to help resolving imports:
npm i web-component-base
Usage
In your component class:
// HelloWorld.mjs
import WebComponent from "https://unpkg.com/web-component-base";
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:
Minimal Example
If you want a quick start example to copy, this is an example of using a custom element in a single .html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WC Base Test</title>
<script type="module">
// import from unpkg
import WebComponent from "https://unpkg.com/web-component-base";
class HelloWorld extends WebComponent {
static get observedAttributes() {
return ['name'];
}
get template() {
return `<h1>Hello ${this.name || 'World'}!</h1>`;
}
}
customElements.define("hello-world", HelloWorld);
</script>
</head>
<body>
<hello-world name="Ayo"></hello-world>
<script>
const helloWorld = document.querySelector('hello-world');
setTimeout(() => {
helloWorld.setAttribute('name', 'Ayo zzzZzzz');
}, 2500);
</script>
</body>
</html>
Life-Cycle Hooks
Define behavior when certain events in the component's life cycle is triggered by providing hook methods
onInit()
- gets triggered when the component is connected to the DOM
- best for setting up the component
import WebComponent from "https://unpkg.com/web-component-base";
class ClickableText extends WebComponent {
// gets called when the component is used in an HTML document
onInit() {
this.onclick = () => console.log(">>> click!");
}
get template() {
return `<span style="cursor:pointer">Click me!</span>`;
}
}
onChanges()
- gets triggered when an attribute value changed
import WebComponent from "https://unpkg.com/web-component-base";
class ClickableText extends WebComponent {
// gets called when an attribute value changes
onChanges(changes) {
const {property, previousValue, currentValue} = changes;
console.log('>>> ', {property, previousValue, currentValue})
}
get template() {
return `<span style="cursor:pointer">Click me!</span>`;
}
}