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?