admin管理员组

文章数量:1403355

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

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

A ment 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?

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

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

A ment 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?

• javascript
• web-ponent

Share Improve this question Follow asked Apr 17, 2022 at 10:18 Felix BenningFelix Benning 1,21244 gold badges1414 silver badges3030 bronze badges 12

• Does this answer your question? Inherit from html5 canvas class – tevemadar Commented Apr 17, 2022 at 10:26
• You can try some things, but it will unlikely work. Just like in case of canvas, developer.mozilla/en-US/docs/Web/API/HTMLSpanElement starts as The HTMLSpanElement interface represents - so, it's an interface only, not the plete element. That's why an attempt on extending it usually fails. – tevemadar Commented Apr 17, 2022 at 10:30
• 1 Note that for 6 years now Apple has stated they will not implement Customized Built-In Elements Because they do not ply to the Liskov Substitution Principle Only Autonomous Custom Elements extend HTMLElement are suported in Safari. – Danny '365CSI' Engelman Commented Apr 17, 2022 at 10:45
• okay this answerw why the HTMLSpanElement does not work. Is there a list of html elements somewhere that is safe to extend? I mean the button example is in virtually every tutorial so I assume that it is desired that you extend more advanced elements if applicable – Felix Benning Commented Apr 17, 2022 at 10:46
• 1 Documentation sucks (sometimes) That button example should be removed from the docs. If you want to support Safari (and not use Polyfills) you can not extend any Built In Elements. Stick to Autonomous Elements, extend HTMLElement – Danny '365CSI' Engelman Commented Apr 17, 2022 at 10:49

 |  Show 7 more ments

1 Answer 1

Sorted by: Reset to default 7

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

• Autonomous Custom Elements: extend HTMLElement

• Customized Built-In Elements extend HTML<any>Element
  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>

本文标签： javascriptUncaught TypeError Illegal constructor when extending HTMLSpanElementStack Overflow