`Uncaught TypeError: Illegal constructor.` when extending HTMLSpanElement

user_6662425 0
Viewed 636

I am getting an Uncaught TypeError: Illegal constructor. for a basically empty constructor:

export class Citation extends HTMLSpanElement {
  constructor() {
    super();
  }
}

A comment in this helpful answer claimed that

I encountered the same error with Web Components but only on Safari (not Firefox). Cause was that I did a class UserAvatar extends HTMLSpanElement (rather than HTMLElement)

This made me try out HTMLElement and this in fact removed the error. So now I am wondering. What HTML elements can I extend? Why can I not extend the span element? There are a couple of similar questions: Uncaught TypeError: Illegal constructor when extending HTMLButtonElement, How to create new instance of an extended class of custom elements. But they are a bit older and in this answer it is claimed that this should now work since october 2018. I am using an up to date firefox browser so I am confused...

Anybody know whats going on?

web-component javascript
1 Answers

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

  • Autonomous Custom Elements: extend HTMLElement

  • Customized Built-In Elements
    Polyfill required for Safari
    because Apple doesn't want to implement this type of elements.
    For a good reason; read the very long debate (going back to 2016)

General advice

Stick to autonomous elements, unles you know what you are doing.

One registry to rule them all

(for now) There is only one registry so your Customized element is registered as fancy-button;
That means you can not mix the 2 types, with the same element name.

Update

Dont use the 3rd parameter for Autonomous Elements (extending HTMLElement)

You can't mix settings:

<script>
  class BaseClass extends HTMLElement {
    connectedCallback() {
      console.log("I AM ", this.nodeName);
    }
  }
  customElements.define('el-1', class extends BaseClass {});
  customElements.define('el-2', class extends BaseClass {}, {
    extends: "ul"
  });

</script>

<el-1></el-1>

<!-- doesn't do anything -->
<el-2></el-2>

<!-- throws "TypeError: Illegal constructor." -->
<ul is="el-2"></ul>

user_25208000
Related