# Web Component Base
This serves as a very minimal base class for creating custom elements.
This does not aim to be an alternative to [Lit](https://lit.dev/). Lit is good; use it if you want.
## Installation
```bash
npm i web-component-base
```
## Usage
When you extend the `WebComponent` class for your component, you only have to define the `template()` and `observedAttributes()`, and the UI will be reactive on attribute changes.
In your component class:
```js
// 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 `
Hello ${this.name}${this.emotion === "sad" ? ". ðŸ˜" : "! 🙌"}
`;
}
}
customElements.define('hello-world', HelloWorld);
```
Then changes in the attributes observed will cause the UI to render.
In your HTML page:
```html
```
The result is a reactive UI that updates on attribute changes:
