Obtengo un Uncaught TypeError: Illegal constructor. para un constructor básicamente vacío:
export class Citation extends HTMLSpanElement { constructor() { super(); } }Un comentario en esta respuesta útil afirmó que
Encontré el mismo error con Web Components pero solo en Safari (no en Firefox). La causa fue que hice una clase UserAvatar extends HTMLSpanElement (en lugar de HTMLElement)
Esto me hizo probar HTMLElement y, de hecho, eliminó el error. Así que ahora me pregunto. ¿Qué elementos HTML puedo extender? ¿Por qué no puedo extender el elemento span? Hay un par de preguntas similares: TypeError no detectado: constructor ilegal al extender HTMLButtonElement , cómo crear una nueva instancia de una clase extendida de elementos personalizados . Pero son un poco más antiguos y en esta respuesta se afirma que esto debería funcionar desde octubre de 2018. Estoy usando un navegador Firefox actualizado, así que estoy confundido...
¿Alguien sabe qué está pasando?
Hay 2 tipos de MDN de Elementos Personalizados: Uso de Elementos Personalizados
Elementos personalizados autónomos : extend HTMLElement
Elementos integrados personalizados
Polyfill requerido para Safari
porque Apple no quiere implementar este tipo de elementos.
Por una buena razon; lea el debate muy largo (que se remonta a 2016)
Cíñete a los elementos autónomos , a menos que sepas lo que estás haciendo.
Un registro para gobernarlos a todos
(por ahora) Solo hay un registro, por lo que su elemento personalizado se registra como fancy-button ;
Eso significa que no puede mezclar los 2 tipos, con el mismo nombre de elemento.
No use el tercer parámetro para Elementos autónomos (extendiendo HTMLElement)
No puedes mezclar configuraciones:
<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>