How to create a new instance of an extended custom item class

Question

I try to give an example from the Google developer site and I get an error: "TypeError: Illegal constructor. What happened and how to fix it?

class FancyButton extends HTMLButtonElement { constructor() { super(); // always call super() first in the ctor. this.addEventListener('click', e => 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 => div.remove()); } } customElements.define('fancy-button', FancyButton, {extends: 'button'}); let button = new FancyButton(); button.textContent = 'Fancy button!'; button.disabled = true; 

Answer 1

Blink, the web engine that currently implements Custom Element v1 (in Chrome v53 + , for example) supports stand-alone user elements : see the open Startup Error .

If you want to define customized inline elements (i.e. <button> extension), you need to use a polyfill like the one from Web Reflection .

Alternatively, you can still use the Custom Element v0 syntax ( document.registerElement ).

---

Update

Since Chrome v60 (July 2017), an alpha implementation of custom buit-in elements is available under the flag. However, it only works for <p> and <div> tags ...

---

Update 2

Now (April 2018) it works with versions of Chrome v67 and higher :-)