web-component - 点亮：嵌套模板不呈现

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