Расширение встроенных элементов HTML

https://yocton.ru/html-elements/global-attributes/is

by yocton

HTML

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Кнопка-таймер</title>
  </head>
  <body>
    <p>Кнопка включает/выключает таймер по щелчку</p>
    <button is="timer-button" id="timer">0</button>
  </body>
</html>

JavaScript

class TimerButton extends HTMLButtonElement {
  constructor() {
    super();
    this.tmr = null;

    this.addEventListener("click", function() {
      if (this.tmr) {
        clearInterval(this.tmr);
        this.tmr = null;
      } else {
        var self = this;
        this.tmr = setInterval(function() {
          self.innerHTML++;
        }, 1000);
      }
    });
  }
}

customElements.define('timer-button', TimerButton, {
  extends: 'button'
});