Как расширить HTML-элементы по умолчанию как «настраиваемый встроенный элемент» с помощью веб-компонентов?

Question

Я ищу, чтобы узнать, как расширить элементы HTML по умолчанию, используя новую спецификацию веб-компонента HTML5. Я попытался примеры, описанные с помощью Google здесь: https://developers.google.com/web/fundamentals/getting-started/primers/customelements

Они являются:

Anonymous функция:

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'}); 

в HTML как:

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

и

Названная функция :

// 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'}); 

в HTML как:

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

я не могу получить любой из этих примеров, чтобы работать в Chrome 55. Что может быть происходит, что задаваемого пользователем встроенные элементы не работает? Я попытался поместить JS и HTML в другом порядке и заменить HTMLImageElement для Image в примере. Любая помощь будет принята с благодарностью!

Answer 1

Это связано с тем, что пользовательские встроенные элементы еще не реализованы в Chrome/Opera. Проверьте статус разработчиков Chromium в this issue.

Только автономные пользовательские элементы уже реализованы изначально.

В то же время вы должны использовать полиполк, такой как WebReflection's one.