기본 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"> 

및

명명 된 기능 나는 여기에 구글에 의해 설명 된 예제를 시도했다 :

같은 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과 같은 폴리 폴리를 사용해야합니다.