Counter-Meister DE2

by WebComponents

HTML

<h1>
  Optimized &lt;my-counter> Web Component
</h1>
<h2>
  A <code>.count</code> Getter/Setter. NO methods: inc, dec, update
</h2>

<my-counter></my-counter>

<h2>GZip analysis:</h2>

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

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

CSS

body{
  font:16px Arial;
  background:beige;
}
code{
  background:grey;
  color:beige;
}

JavaScript

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