Lit: nested template doesn't render

Question

I have a really simple template and a simple nested template. Unfortunately, my nested template doesn't render anything.

I followed the example defined at: https://lit.dev/docs/components/rendering/

This is my container template.

import "./ul-mail";

@customElement("box-mail")
class BoxMail extends LitElement {
  public render() {
    return html`
      <div>
        <ul-mail></ul-mail>
        <p>custom</p> 
      </div>
    `;
  }
}

this is my nested template.

@customElement("ul-mail")
class UlMail extends LitElement {

  connectedCallback(): void {
    console.log("UL-MAIL CHILD: connected now"); // triggers.
  }

  public render() {
    console.log("UL-MAIL CHILD: rendered"); // doesn't trigger.
    return html`<p>hello from ul-mail!</p>`;
  }
}

My page looks like this in the devtools inspector:

<box-mail>
 #shadow-root(open)
 <!---->
 <div>
   <ul-mail><ul-mail>
   <p>custom</p>
 </div>
</box-mail>

As you can see; ul-mail renders nothing, no hello from ul-mail!.

I was wondering what is going wrong?

I don't know Lit, lucky enough to not have to. In vanilla JS your code would need a ``super.connectedCallback()`` inside your own ``connectedCallback`` where (I think) Lit triggers the ``render`` method.. That is exaclty why I say _Learn the Technology first, and the Tools later_ — Danny '365CSI' Engelman, Dec 30 '21 at 13:31

score 3 · Accepted Answer · edited Mar 07 '22 at 13:12

Anytime we implement lifecycle callback methods, it's necessary to call the parent class's methods (so the superclass features work as-expected).

If you need to customize any of the standard custom element lifecycle methods, make sure to call the super implementation (such as super.connectedCallback()) so the standard Lit functionality is maintained.

Standard custom element lifecycle

  connectedCallback(): void {
    super.connectedCallback()
    console.log("UL-MAIL CHILD: connected now"); // triggers.
  }

Lit: nested template doesn't render

1 Answers1