Custom HTML element extending another custom element

Question

I have a custom HTML tag <fancy-foo> that I would like to extend the functionality of. Some of the <fancy-foo> elements would be extended using the pretty-bar custom element, so that I can use them in my HTML as

<fancy-foo is="pretty-bar">
    <!-- content -->
</fancy-foo>

so, I define classes FancyFoo and PrettyBar, define the fancy-foo element and extend it using pretty-bar, like so:

class FancyFoo extends HTMLElement {
  constructor() {
    super();
  }
}

class PrettyBar extends FancyFoo {
  constructor() {
    super();
  }
}

window.customElements.define('fancy-foo', FancyFoo);
window.customElements.define('pretty-bar', PrettyBar, {extends: 'fancy-foo'});

Sadly, Google Chrome spits out the error

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': "fancy-foo" is a valid custom element name

That's an odd error. Strangely, it says "fancy-foo" is a valid custom element name; I know that, but why should that throw an error?

What's going on here?

Answer 1

You cannot extend Custom Elements that way (with {extends: '...'}). You can only extend buit-in (= standard) HTML elements.

If you want to design PrettyBar as an extension of FancyFoo, you'll need to define it as an autonomous custom element:

class PrettyBar extends FancyFoo {...}
window.customElements.define('pretty-bar', PrettyBar)

Same thing for the HTML tag:

<pretty-bar></pretty-bar>