mcfly/src/components/vanilla-hello-world.js

18 lines
488 B
JavaScript

class HelloWorld extends HTMLElement {
static get observedAttributes() {
return ["data-name"];
}
connectedCallback() {
let count = 0;
this.onclick = () => {
this.setAttribute("data-name", `Clicked ${++count}x`);
};
}
attributeChangedCallback(property, previousValue, currentValue) {
if (property === "data-name" && previousValue !== currentValue) {
this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
}
}
}