Webコンポーネントを使用して、デフォルトのHTML要素を「カスタマイズされた組み込み要素」として拡張する方法はありますか？

Question

私は新しいHTML5 Web Component仕様を使用してデフォルトのHTML要素を拡張する方法を学びたいと考えています。 https://developers.google.com/web/fundamentals/getting-started/primers/customelements

彼らは次のとおりです：

匿名機能：HTMLで

customElements.define('bigger-img', class extends Image { 
    // Give img default size if users don't specify. 
    constructor(width=50, height=50) { 
    super(width * 10, height * 10); 
    } 
}, {extends: 'img'}); 

として：

<img is="bigger-img" width="15" height="20"> 

と

という名前の関数私はここでGoogleが概説例を試してみました：

HTML内

// See https://html.spec.whatwg.org/multipage/indices.html#element-interfaces 
// for the list of other DOM interfaces. 
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'}); 

：

<button is="fancy-button" disabled>Fancy button!</button> 

私は、カスタマイズされた組み込みの要素を作成すると、動作しないことが起こって何ができるかクローム55で動作するようにこれらの例のいずれかを取得することはできませんか？私はJSとHTMLを別の順序で入れて、ImageのためにHTMLImageElementを入れ替えようとしました。どんな助けでも大歓迎です！

Answer 1

カスタマイズされた組み込み要素がChrome/Operaにまだ実装されていないためです。 Chromium開発者のステータスをthis issueにチェックしてください。

すでに自律型カスタム要素のみがネイティブに実装されています。

男性の場合、WebReflection's oneのようなポリフィルを使用する必要があります。