to bind or not to bind

by dannye

HTML

<h3 id=total>

</h3>
<button is="his-el" type="button">Click me</button>
<hr>
<button is="my-el" type="button">Click me</button>
<hr>
<button is="my-betterel" type="button">Click me</button>

CSS

button {
  width: 12em;
  height: 3em;
  font-size: 2em;
}

JavaScript

customElements.define('his-el', class extends HTMLButtonElement {
  constructor() {
    super();
    this.clickCount = 0;
    window.addEventListener('click', this.clickHandler.bind(this));
  }
  clickHandler(e) {
    if (e.target === this) this.textContent = `His clicked ${++this.clickCount} times`;
  }
}, {
  extends: 'button'
});
/*********************************************************************/
customElements.define('my-el', class extends HTMLButtonElement {
  constructor() {
    super();
    this.clickCount = 0;
    window.addEventListener('click', e => e.target === this ? this.clickHandler() : void 0);
  }
  clickHandler() {
    this.textContent = `Mine clicked ${++this.clickCount} times`;
  }
}, {
  extends: 'button'
});
/*********************************************************************/
customElements.define('my-betterel', class extends HTMLButtonElement {
  constructor() {
    super();
    let clickCount = 0; //now the outside world can't change me
    window.addEventListener('click', e => {
      if (e.target === this) this.textContent = `I was clicked ${++clickCount} times`;
    });
  }
}, {
  extends: 'button'
});

let totalClicks = 0;
window.addEventListener('click', () => total.innerText = `${++totalClicks} clicks`);