class Counter extends HTMLElement {
  constructor() {
    super();

    this.value = 0;
    this.attachShadow({ mode: "open" });

    const wrapper = document.createElement("div");
    wrapper.innerHTML = `
        <p> Here is a simple counter: </p>
        <p>
          Value:
          <span id="value"> ${this.value} </span>
        </p>
        <button id="upButton"> Up </button>
        <button id="downButton"> Down </button>
      `;

    const valueEl = wrapper.querySelector('#value');
    const upButton = wrapper.querySelector("#upButton");
    const downButton = wrapper.querySelector("#downButton");

    upButton.addEventListener("click", () => {
      this.value++;
      valueEl.innerHTML = this.value;
    });
    downButton.addEventListener("click", () => {
      this.value--;
      valueEl.innerHTML = this.value;
    });

    this.shadowRoot.append(wrapper);
  }
}

customElements.define('custom-counter', Counter);