kgreen kgreen - 1 month ago 15
Javascript Question

Unable to create custom element when extending built-in element in Chrome 54

I'm unable to create a custom element when extending from a built-in element in Chrome 54.

To my knowledge this feature has shipped. Is there something I am missing? Perhaps this portion of the v1 spec is still in flux.

<super-element>Super Element</super-element>
<button is="super-button">Super Button</button>

<script>
customElements.define('super-element', class extends HTMLElement {
constructor() {
super();
console.log('Super Element');
}
});

customElements.define('super-button', class extends HTMLButtonElement {
constructor() {
super();
console.log('Super Button');
}
}, {extends: 'button'});
</script>

// Output: Super Element


Thanks.

Answer

Perhaps this portion of the v1 spec is still in flux.

Exactely.

Customized built-in elements are not implemented yet in Blink, the Chrome & Opera HTML rendering engine.

Look at the "Launch" and "Implement" bugs in Chromium project's tracker.

See also SO answer here for a workaround.