<my-counter>

by WebComponents

HTML

<script>
customElements.define( "my-counter", class extends HTMLElement {
  get buttonspan() {
  	return this.button.querySelector("span");
  }
  get count() {
  	return ~~this.buttonspan.textContent;
  }
  set count(value) {
  	this.buttonspan.textContent = value;
  }
  constructor( count = 0 , increment = 1) { // Web Component can be extended with different initial state
    // one helper function every Framework also uses
    let createElement = (tag,props={}) => Object.assign(document.createElement(tag),props);
    super() // sets AND returns 'this' scope
      .attachShadow({mode:"open"}) // sets AND returns this.shadowRoot
      .append( // not in IE Browser, old geezers use appendChild, append can do more
        this.button = createElement("button", {
          innerHTML: `Clicked <span>${count}</span> times`, // only change that span!
          onclick: e => this.count = count += increment
        })
    )        
  }
})

customElements.define("counter-42", class extends customElements.get("my-counter"){
	constructor() {
  	super(42,42)
  }
})
</script>

<my-counter></my-counter>
<my-counter></my-counter>
<my-counter></my-counter>

<counter-42></counter-42>