41 lines
1 KiB
Markdown
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>
|
|
```
|
|
|
|

|