title: Uncaught TypeError: Illegal constructor when extending HTMLButtonElement
body: <p>I have the following class from <a href="https://developers.google.com/web/fundamentals/getting-started/primers/customelements" rel="nofollow noreferrer">here</a>:</p>
  
  <pre><code>class FancyButton extends HTMLButtonElement {
      constructor() {
          super(); // always call super() first in the ctor.
          this.addEventListener('click', e =&gt; this.drawRipple(e.offsetX, e.offsetY));
      }
  
      // Material design ripple animation.
      drawRipple(x, y) {
          let div = document.createElement('div');
          div.classList.add('ripple');
          this.appendChild(div);
          div.style.top = `${y - div.clientHeight / 2}px`;
          div.style.left = `${x - div.clientWidth / 2}px`;
          div.style.backgroundColor = 'currentColor';
          div.classList.add('run');
          div.addEventListener('transitionend', e =&gt; div.remove());
      }
  }
  </code></pre>
  
  <p>When it's being instantiated, I get the error:</p>
  
  <pre><code>fancy-button.js:5 Uncaught TypeError: Illegal constructor
  </code></pre>
  
  <p>When I click on the location, I'm presented with this:</p>
  
  <pre><code>((e) =&gt; { throw e; })
  </code></pre>
  
  <p>What's wrong with the class constructor?</p>