<interaction-element></interaction-element>
class InteractionExample extends HTMLElement {
count = 0;
constructor() {
super();
const shadow = this.attachShadow({ mode: "open" });
const button = document.createElement("button");
button.appendChild(document.createTextNode("Click me"));
button.addEventListener("click", (e) => {
this.count += 1;
button.innerText = `You clicked me ${this.count} times!`;
});
shadow.appendChild(button);
}
}
customElements.define("interaction-element", InteractionExample);
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.