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

Question

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 1

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.

Update with Chrome 67

Now it works with versions of Chrome version 67 and above.