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

任何时候我们实现生命周期回调方法，都需要调用父 class 的方法（因此 superclass 功能按预期工作）。

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

Lit：嵌套模板不呈现

Lit: nested template doesn't render

web-component

parceljs

lit-element

lit-html

lit