Lit:嵌套模板不会呈现

Question

我有一个非常简单的模板和一个简单的嵌套模板。不幸的是，我的嵌套模板没有呈现任何内容。

我遵循了在：https://lit.dev/docs/components/rendering/中定义的示例

这是我的容器模板。

import "./ul-mail";

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

这是我的嵌套模板。

@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>`;
  }
}

我的页面在devtools检查员中是这样的：

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

如您所见，ul-mail不呈现任何内容，也不呈现hello from ul-mail!。

我在想到底是怎么回事？

Answer 1

每当我们实现生命周期回调方法时，都有必要调用父类的方法(因此超类特性可以像预期的那样工作)。

如果您需要自定义任何标准的自定义元素生命周期方法，请确保调用超级实现(例如super.connectedCallback())，以便维护标准Lit功能。 标准自定义元素生命周期

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