33 lines
776 B
JavaScript
33 lines
776 B
JavaScript
// @ts-check
|
|
import WebComponent from "../src/index.js";
|
|
|
|
export class HelloWorld extends WebComponent {
|
|
name = "World";
|
|
emotion = "excited";
|
|
|
|
static properties = ["data-name", "emotion"];
|
|
|
|
onInit() {
|
|
let count = 0;
|
|
this.onclick = () => {
|
|
this.setAttribute("data-name", `Clicked ${++count}x!`);
|
|
};
|
|
}
|
|
|
|
afterViewInit() {
|
|
console.log("afterViewInit", this.querySelector("h1"));
|
|
}
|
|
|
|
onChanges(changes) {
|
|
const { property, previousValue, currentValue } = changes;
|
|
console.log(`${property} changed`, { previousValue, currentValue });
|
|
}
|
|
|
|
get template() {
|
|
return `<button id="btn">Hello ${this.dataName}${
|
|
this.emotion === "sad" ? ". 😭" : "! 🙌"
|
|
}</button>`;
|
|
}
|
|
}
|
|
|
|
customElements.define("hello-world", HelloWorld);
|