• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

303
Vistas
`Error de tipo no capturado: constructor ilegal.` al extender HTMLSpanElement

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?

about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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)

Consejos generales

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.

Actualizar

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>

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda