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?

Answer 1

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.
  }