> TLDR; See [quick start example](#minimal-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
1. [Vanilla JS import](#vanilla-js-import)
1. [Installation](#installation)
1. [Usage](#usage)
1. [Minimal Example](#minimal-example) - Quick start you can copy-paste 😉
1. [Life-Cycle Hooks](#life-cycle-hooks)
1. [`onInit`](#oninit) - the component is connected to the DOM
1. [`onChanges`](#onchanges) - an attribute value changed
## Vanilla JS import
Import using [unpkg](https://unpkg.com/web-component-base) in your component. We will use this in the rest of our [usage examples](#usage).
```js
import WebComponent from "https://unpkg.com/web-component-base";
```
## Installation
If you have a bundler to help resolving imports:
```bash
npm i web-component-base
```
## Usage
In your component class:
```js
// 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 `
Hello ${this.name}${this.emotion === "sad" ? ". ðŸ˜" : "! 🙌"}
`;
}
}
customElements.define('hello-world', HelloWorld);
```
In your HTML page:
```html
```
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:
```html
WC Base Test
```
## 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
```js
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 `Click me!`;
}
}
```
### onChanges()
- gets triggered when an attribute value changed
```js
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 `Click me!`;
}
}
```