कस्टम तत्वों की एक विस्तारित वर्ग के नया उदाहरण बनाने के लिए कैसे

Question

मैं google developer site से उदाहरण कोशिश कर रहा हूँ और मैं त्रुटि हो रही है: "लेखन त्रुटि:। अवैध निर्माता क्या गलत है और इसे ठीक करने के लिए कैसे

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, वेब इंजन है कि वर्तमान में (उदाहरण के लिए Chrome v53+ में) कस्टम तत्व v1 लागू करता है केवल autonomous custom elements समर्थन करता है: खुला देख Blink bug

आप customized built-in elements (यानी <button> विस्तार) को परिभाषित करना चाहते हैं, तो आप एक का उपयोग करना होगा। पॉलीफिलकी तरह।

वैकल्पिक रूप से, आप अभी भी कस्टम एलिमेंट v0 वाक्यविन्यास (document.registerElement) का उपयोग कर सकते हैं।

---

अद्यतन

क्रोम V60 के बाद से (जुलाई 2017) के लिए अनुकूलित buit-इन तत्वों एक ध्वज के तहत उपलब्ध है एक alpha implementation। हालांकि यह केवल <p> और <div> टैग के लिए काम करता है ...