Web Components : extending native elements

I'm trying to create a web component that extends the div element and I found this other Stack Overflow question about how to extend native elements (a button in this case). However, I cannot make it work. And, according to the update in this answer, it should work.

If you look at the results in this simplified code snippet, it is just rendered as a simple inline element with text. And if you open the Chrome console and look in the properties tab it is also clear that it does not inherit from HTMLButtonElement (which it should). What's wrong?

class FancyButton extends HTMLButtonElement {
    constructor() {
        super(); // always call super() first in the ctor.
        this.addEventListener('click', e => this.innerHTML = "I was clicked");
    }
}

customElements.define('fancy-button', FancyButton, { extends: 'button' });

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <fancy-button>Click me</fancy-button>
  </body>
</html>

Solution

There are 2 types of Custom Elements MDN: Using Custom Elements

Autonomous Custom Elements
Customized Built-In Elements
Polyfill required for Safari
because Apple, with valid argument, will not implement these

One registry to rule them all

(for now) There is only one registry so your Customized element is registered as fancy-button;
But can NOT be used with Autonomous notation: <fancy-button></fancy-button/>

Firefox DOES allow a mix of both notations BUT only if define() is used AFTER the Custom Elements was parsed in the DOM

From docs section: Extending Native HTML Elements:

https://developers.google.com/web/fundamentals/web-components/customelements#extendhtml

Consumers of a customized built-in element can use it in several ways.
They can declare it by adding the is="" attribute on the native tag:

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

create an instance in JavaScript:

    // Custom elements overload createElement() to support the is="" attribute.
    let button = document.createElement('button', {is: 'fancy-button'});
    button.textContent = 'Fancy button!';
    button.disabled = true;

    // have to do this yourself!! IF you want to use it as a selector
    button.setAttribute("is","fancy-button");

    document.body.appendChild(button);

or use the new operator:

    let button = new FancyButton();
    button.textContent = 'Fancy button!';
    button.disabled = true;

Conclusion

There are 2 types of Custom Elements, you can't mix

You either go for:

Autonomous Custom Element: <fancy-button></fancy-button>

Customized Built-In Element <button is=fancy-button></button>

for Customized Built-In Elements

document.createElement('fancy-button') instanceof HTMLButtonElement

returns false

and

<fancy-button>lightDOM</fancy-button>

document.querySelector('fancy-button')

returns the element (if in the DOM),
but the element is processed as an undefined Element displaying the lightDOM contents

Example using both types of Custom Elements

In https://cardmeister.github.io I used both:

<card-t rank=queen suit=hearts></card-t>

<img is=queen-of-hearts/>

Thus I could not do:

<queen-of-hearts></queen-of-hearts>

The latter has little value, with IMG the is attribute can be used for CSS targetting.
CSS Selector for a partial CustomElement nodename