Web Component <fancy-button>

by WebComponents

HTML

<script>
  customElements.define("my-counter", class extends HTMLElement {
      #count; // private counter
      constructor() {
          // single line "framework", best helper function ever:
          const createElement=(tag,props={})=>Object.assign(document.createElement(tag),props);
          // yes, you *can* use JavaScript before the super() call; MDN documentation is wrong!
          super() // sets AND returns 'this' scope
              .attachShadow({ mode: "open" }) // sets AND returns this.shadowRoot
              .append(
                  createElement("style", { // styles inside shadowDOM
                    textContent: `button{color:blue}`
                  }),
                  this.button = createElement("button", {
                      set: (cnt) => this.button.innerHTML = `Count is <b>${cnt}</b>`,
                      onclick: (evt) => this.count++
                  })
              ) // append
      } // constructor
      get count(){
        return this.#count;
      }
      set count(val) {
        this.button.set(this.#count = val);
      }
      connectedCallback(){
        this.count = 0;
      }
  });
</script>

<my-counter></my-counter>