Jak utworzyć nową instancję dłuższy klasy elementów niestandardowych

Question

Próbuję przykład z google developer site i dostaję błąd: „TypeError. Nielegalnym konstruktora Co się stało i jak to naprawić

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, silnik internetowa, która obecnie realizuje niestandardowe Element V1 (w Chrome v53+ na przykład) obsługuje tylko autonomous custom elements: patrz otwarte Blink bug

Jeśli chcesz zdefiniować customized built-in elements (tj <button> rozszerzenia), musisz użyć. polyfill jak the one from Web Reflection.

Alternatywnie można nadal używać składni Custom Element v0 (document.registerElement).

---

Aktualizacja

ponieważ Chrome V60 (lipiec 2017) W alpha implementation dostosowanych buit w elementach jest dostępna pod flagą. Jednak działa tylko dla tagów <p> i <div> ...