<my-counter>

by WebComponents

HTML

<my-counter count="42"></my-counter>

<script>
  customElements.define("my-counter", class extends HTMLElement {
    static get observedAttributes() {
      return ["count"]
    }

    constructor() {
      const createElement = (tag, props = {}) => Object.assign(document.createElement(tag), props);
      super()
        .attachShadow({mode:"open"})
        .append(
          createElement("style", {
            innerHTML: `b{padding:0 1em}`
          }),
          createElement("button", {
            innerHTML: "dec",
            onclick: e => this.count--
          }),
          this.counter = createElement("B", {
            innerHTML: "0"
          }),
          createElement("button", {
            innerHTML: "inc",
            onclick: e => this.count++
          })
        )
    }

    get count() {
      return Number(this.counter.textContent);
    }

    set count(newValue) {
      this.setAttribute("count", this.counter.textContent = newValue);
    }

    attributeChangedCallback(name, oldValue, newValue) {
      if (oldValue !== newValue) this.count = newValue;
    }
  });

</script>