Как создать новый экземпляр расширенного класса пользовательских элементов

Question

Я пытаюсь пример из google developer site, и я получаю ошибку: «TypeError:. Illegal конструктор Что не так и как это исправить

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, веб-движок, который в настоящее время реализует пользовательский элемент v1 (в Chrome v53+, например) поддерживает только autonomous custom elements: см открыт Blink bug

Если вы хотите определить customized built-in elements (т.е. <button> расширения), вы должны будете использовать. полиполк the one from Web Reflection.

В качестве альтернативы вы можете использовать синтаксис Custom Element v0 (document.registerElement).

---

Обновление

Так как Chrome V60 (июль 2017 г.) alpha implementation Согласовать заказной буит-в элементах доступен под флагом. Однако он работает только для <p> и <div> тегов ...