| .vscode | ||
| assets | ||
| demo | ||
| .gitignore | ||
| index.mjs | ||
| package.json | ||
| README.md | ||
| WebComponent.mjs | ||
TLDR; See the quick start example you can just copy, refactor, and modify 😉
Web Component Base
This provides 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 properties. Any change in any property value will automatically cause just the component UI to render.
The result is a reactive UI on property changes.
Table of Contents
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 properties = ["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:
Quick Start Example
Here 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 properties = ["name", "emotion"];
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>`;
}
}