원본 <my-counter> = 476바이트:

리팩터링 코드

    constructor() {
        super()
            .attachShadow({ mode: 'open' })
            .innerHTML = "<style>*{font-size:200%}...

    customElements.define('my-counter', class extends HTMLElement {}

    render() {
        return html`
        <button @click="${this.dec}">-</button>
        <span>${this.count}</span>
        <button @click="${this.inc}">+</button>
        `;
    }

    <button onclick="this.getRootNode().host.inc()">
    <button onclick="this.getRootNode().host.dec()">

    connectedCallback() {
        this.update(this.count);
    }

    "<span>0</span>"+

    <button onclick=this.getRootNode().host.inc()>
    <button onclick=this.getRootNode().host.dec()>

리팩터링된 코드 = 355바이트:

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;
    }
  }
);

최적화된 코드 = 339바이트:

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;
    }
  }
);

.innerHTML = 
"<button style=font-size:200%;width:4rem;height:4rem;border:none;border-radius:10px;background:seagreen;color:white onclick=this.getRootNode().host.count-- >-</button>" +
"<p style=font-size:200%;width:4rem;display:inline-block;text-align:center>0</p>" +
"<button style=font-size:200%;width:4rem;height:4rem;border:none;border-radius:10px;background:seagreen;color:white onclick=this.getRootNode().host.count++>+</button>"

최소형 결론