# 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)