two buttons clicked

by WebComponents

HTML

<script>
  customElements.define( "hello-buttons", class extends HTMLElement {
    connectedCallback(
    	buttoncount = ~~(this.getAttribute("buttoncount") || 3),
      buttons = Array(buttoncount).fill(0),
      createElement = (tag, props = {}) => Object.assign(document.createElement(tag), props),
      button = idx => buttons[idx] = createElement("button", {
        innerHTML: "Button " + (idx+1),
        onclick: () => { 
          buttons[idx].classList.toggle("selected");
          let allSelected = buttons.every(button=>button.classList.contains("selected"));
          this.msg.innerHTML = allSelected ? "Hello" : ""
        }
      })
    ) {
      this.attachShadow({ mode: "open" })
           .append(
           		createElement("style", { innerHTML:`.selected{background:lightgreen}` }),
           		createElement("h1", { innerHTML:buttoncount+" buttons"}),
              this.msg = createElement("h2", { innerHTML:` Click all ${buttoncount} buttons`}),
           		...buttons.map( (_,idx) => button(idx)), 
            )
    }
  })
</script>

<hello-buttons ></hello-buttons>
<hello-buttons buttoncount="5"></hello-buttons>
<hello-buttons buttoncount="10"></hello-buttons>