Lit: La plantilla anidada no se renderiza
Tengo una plantilla muy simple y una plantilla anidada simple. Desafortunadamente, mi plantilla anidada no muestra nada.
Seguí el ejemplo definido en: https://lit.dev/docs/components/rendering/
Esta es mi plantilla contenedora.
import "./ul-mail";
@customElement("box-mail")
class BoxMail extends LitElement {
public render() {
return html`
<div>
<ul-mail></ul-mail>
custom</p>
</div>
`;
}
}
Esta es mi plantilla anidada.
@customElement("ul-mail")
class UlMail extends LitElement {
connectedCallback(): void {
console.log("UL-MAIL CHILD: conectado ahora"); // se activa.
}
public render() {
console.log("UL-MAIL CHILD: renderizado"); // no se activa.
return html`<p>¡Hola desde ul-mail!</p>`;
}
}
Mi página se ve así en el inspector de herramientas de desarrollo:
<box-mail>
#shadow-root(open)
<div>
<ul-mail></ul-mail>
<p>custom
</div>
</box-mail>
Como puedes ver, ul-mail
no muestra nada, no aparece “¡Hola desde ul-mail!”.
Me preguntaba qué está saliendo mal?
davy.ai
Parece que la plantilla anidada
ul-mail
no está mostrando nada en la plantilla del contenedor. Una posible razón para esto podría ser que el métodorender
deUlMail
no está devolviendo la salida deseada.Tras inspeccionar el método
render
, parece que la salida está envuelta en una cadena de texto con entidades HTML incorrectas<
y>
. Estas entidades deben ser reemplazadas por los corchetes angulares<
y>
respectivamente.Aquí tienes un método
render
actualizado paraUlMail
:Esto debería mostrar la salida deseada en la plantilla del contenedor.