Làm thế nào để tạo ra ví dụ mới của một lớp mở rộng của các yếu tố tùy chỉnh

Question

Tôi đang cố gắng ví dụ từ google developer site và tôi nhận được báo lỗi: "Lỗi Loại:. Constructor bất hợp pháp Có chuyện gì và như thế nào để sửa chữa nó

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, động cơ web mà hiện đang thực hiện Tuỳ chỉnh phần tử v1 (trong Chrome v53+ ví dụ) chỉ hỗ trợ autonomous custom elements: xem mở Blink bug

Nếu bạn muốn xác định customized built-in elements (tức <button> mở rộng), bạn sẽ cần phải sử dụng một. polyfill như the one from Web Reflection.

Cách khác, bạn vẫn có thể sử dụng cú pháp v0 Phần tử tùy chỉnh (document.registerElement).

---

Cập nhật

Vì Chrome V60 (July 2017) một alpha implementation của tùy buit-in các yếu tố được phát hành theo một lá cờ. Tuy nhiên, nó chỉ hoạt động cho các thẻ <p> và <div> ...