Primera vez que intento extender un elemento html específico, en mi caso, un formulario. Tengo algo de experiencia con elementos personalizados/componentes web "normales", derivados de HTMLElement.
El código base para fines de demostración:
customElements.define('my-form', class extends HTMLFormElement { constructor() { console.log('my-form()'); super(); } connectedCallback() { console.log('my-form::cc()'); super.connectedCallback(); } }, {extends: 'form'}); Si inserto el nuevo elemento como <my-form>[form content]</my-form> , el elemento será una instancia de HTMLElement , pero no una instancia de HTMLFormElement , del que se derivó. ¿Por qué? Además, nunca se llama al código en constructor() y connectedCallback() . Por qué ? Definitivamente no es un formulario, porque no tiene la propiedad .elements.
Usar <form is="my-form"> parece funcionar de alguna manera, se llama al constructor y cc(), el objeto es una instancia de HTMLFormElement , el único error que obtengo es TypeError: (intermediate value).connectedCallback is not a function at HTMLFormElement.connectedCallback.
Francamente, preferiría la primera opción (porque en la segunda no puedo usar atributos personalizados y llamarlo html válido). Pero que estoy haciendo mal?
<form is="my-form"> es la notación correcta y única para un elemento incorporado personalizado (extiende HTMLFormElement)
<my-form> es la notación de un elemento autónomo (extiende HTMLElement)
Esta última es la única versión de Elementos personalizados compatible con Safari. Apple, desde 2016, ha declarado que nunca implementará elementos integrados personalizados.
HTMLFormElement NO tiene un método de devolución de llamada connectedCallback ; es por eso que obtiene un error cuando llama a ese método en el super Elemento.
Si extiende desde HTMLFormElement y usa <my-form> , no está relacionado de ninguna manera con su definición; creas un HTMLUnknownElement, que por defecto es un HTMLElement.