/* non-shadow dom minimal custom element */
customElements.define("counter-ce", class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <button>
        ${this.innerHTML} <span></span>
      </button>
    `;

    this.update = ()=>{
      this.querySelector('span').innerHTML = eval(this.getAttribute('value'))
    }

    this.update(); 
    eval(this.getAttribute('onload'));
  }
    
  // -- optional, if you need to listen on attribute changes
  static get observedAttributes() { return ['value'] };
  
  attributeChangedCallback (attr, oldValue, newValue) {
    // first time, it triggers before element is initialized
    if (this.update) this.update();
  }
    
});

/* example using a global redux-like store
<counter-ce
  value="window.store.state.counter"
  onclick="window.store.dispatch('inc')"
  onload="window.store.subscribe(this.update)"
>My button text</counter-ce>
*/