Counter-Meister DE1

by WebComponents

HTML

<h1>
  Refactored &lt;my-counter> Web Component
</h1>
<h2>
  Methods: inc, dec, update
</h2>

<my-counter></my-counter>

<h2>GZip analysis:</h2>

<file-size gz src="https://smallesting.github.io/counter.de1.min.js"></file-size>

CSS

body{
  font:16px Arial;
  background:beige;
}
li{
  margin-top:.5em;
}

JavaScript

customElements.define("my-counter", class extends HTMLElement {
    constructor() {
      super()
        .attachShadow({ mode: "open" })
        .innerHTML =
        "<style>" +
        "*{font-size:200%}"+
        "span{width:4rem;display:inline-block;text-align:center}" +
        "button{width:4rem;height:4rem;border:none;border-radius:10px;background-color:seagreen;color:white}" +
        "</style>" +
        "<button onclick=this.getRootNode().host.dec()>-</button>" +
        "<span>0</span>" +
        "<button onclick=this.getRootNode().host.inc()>+</button>";
      this.count = 0;
    }
    inc() {
      this.update(++this.count);
    }
    dec() {
      this.update(--this.count);
    }
    update(count) {
      this.shadowRoot.querySelector("span").innerHTML = count;
    }
  }
);

// using <file-size> Web Component for Dev.to post
import {} from "https://file-size.github.io/element.js";