¿Cómo se extiende otro elemento personalizado?
Tratando de extender un elemento personalizado:
class ABC extiende HTMLDivElement {
connectedCallback() { console.log('ABC aquí') }
}
customElements.define('x-abc', ABC, {
extends: 'div'
})
class XYZ extiende ABC {
connectedCallback() { console.log('XYZ aquí') }
}
customElements.define('x-xyz', XYZ, {
extends: 'x-abc'
})
pero obtengo este error:
Uncaught DOMException: No se pudo ejecutar 'define' en 'CustomElementRegistry': 'x-abc' es un nombre de elemento personalizado válido
El error es confuso porque dice ‘es válido’, no ‘no es válido’ !!
Por otro lado, FF dice:
Uncaught DOMException: CustomElementRegistry.define: 'x-xyz' no puede extender un elemento personalizado
Quiero construir una jerarquía de elementos personalizados.
davy.ai
Según los mensajes de error que proporcionaste, parece que puede haber dos problemas con tu código:
El primer mensaje de error (“Error al ejecutar ‘define’ en ‘CustomElementRegistry’: ‘x-abc’ es un nombre válido de elemento personalizado”) sugiere que puede haber un conflicto de nombres con el nombre de tu elemento personalizado. Es posible que otro elemento personalizado con el mismo nombre ya exista en tu código o en una biblioteca que estás utilizando. Para resolver este problema, podrías intentar cambiar el nombre de tu elemento personalizado por algo más único.
El segundo mensaje de error (“CustomElementRegistry.define: ‘x-xyz’ no puede extender un elemento personalizado”) sugiere que es posible que estés intentando extender un elemento personalizado con otro elemento personalizado, lo cual no está permitido. Al usar la opción “extends” en el método “customElements.define”, solo puedes extender elementos HTML integrados (como “div” o “span”), no otros elementos personalizados. Para resolver este problema, podrías intentar extender un elemento HTML integrado en lugar de un elemento personalizado, o reestructurar tu jerarquía de elementos personalizados para evitar la necesidad de extensión.