Welcome to {{ project.name }}
Here's a vanilla custom element:
class HelloWorld extends HTMLElement {
static get observedAttributes() {
return ["my-name"];
}
connectedCallback() {
let count = 0;
const currentName = this.getAttribute("my-name");
if (!currentName) {
this.setAttribute("my-name", "World")
}
this.onclick = () => {
this.setAttribute("my-name", `Clicked ${++count}x`);
};
}
attributeChangedCallback(property, previousValue, currentValue) {
if (property === "my-name" && previousValue !== currentValue) {
this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
}
}
}