<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.