wcb/README.md
2023-09-16 22:58:22 +02:00

41 lines
1 KiB
Markdown

# Web Component Base Class
This is a base JavaScript class for creating Web Components easily.
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.
```js
import { WebComponent } from "./WebComponent.mjs";
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>
}
}
```
Then changes in the attributes observed will cause the UI to render.
```html
<hello-world name="Ayo" emotion="sad">
<script>
const helloWorld = document.querySelector('hello-world');
setTimeout(() => {
helloWorld.setAttribute('emotion', 'excited');
}, 2500)
</script>
```
![UI showing feeling toward Web Components changing from SAD to EXCITED](./assets/wc-feeling.gif)