自定义元素非法构造函数

Question

此代码出现 "Illegal Constructor" 错误，谁能告诉我为什么？

class MyCustomElement extends HTMLElement {
  constructor(){
    super();
    // Other things
  }
}

const myFunc = () => {
  const instance = new MyCustomElement();
  console.log(instance);
}

myFunc();

Answer 1

经过几个小时的搜索，我发现您必须先注册自定义元素，然后才能创建它的实例。我认为这不在规范中，但所有浏览器都是如此，错误消息也很糟糕。我希望 chrome 只是说 "You must register a custom element before instantiating it" 而不是 "Illegal Constructor"，这几乎没有告诉我们实际出了什么问题。

class MyCustomElement extends HTMLElement {
  constructor(){
    super();
    // Other things
  }
}

const myFunc = () => {
  const instance = new MyCustomElement();
  console.log(instance);
}

// Add this and it will start working
window.customElements.define('my-custom-element', MyCustomElement);

myFunc();

Answer 2

请注意，您可以在使用 document.createElement() 定义自定义元素之前创建自定义元素。

此元素将创建为未知元素，然后仅在定义后升级为自定义元素。

class MyCustomElement extends HTMLElement {
  constructor(){
    super()
    console.log( 'created' )
  }
}

const myFunc = () => {
  const instance = document.createElement( 'my-custom-element' )
  console.log( instance )
  document.body.appendChild( instance )
}

myFunc()

customElements.define( 'my-custom-element', MyCustomElement )

自定义元素非法构造函数

Custom Element Illegal Constructor

javascript

custom-element