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?