javascript - 没有值的 LitElement 渲染模板

Question

我有一个简单的例子来展示我所看到的:https://stackblitz.com/edit/lit-element-example-3pdnwk?file=index.js .

基本上，当第一个子元素呈现时，text 属性设置正确。但是在第二次呈现时，text 属性首先是 undefined，然后更新为正确的值。

这打破了依赖 _firstRendered() 将正确的值分配给属性的能力。

我真的在做些什么吗？

更新:这是一个更好的例子，使用了 lit-html documentation 中提供的类似方法。 : https://stackblitz.com/edit/lit-element-issue?file=index.js

Answer 1

Am I doing something really off here?

也许吧？ :) 希望您能帮助我理解您选择实现的原因，我可以进一步调查。

我坚持的部分是为什么要像这样在父元素中创建和替换子元素:

this._child = html`<child-element text="${text1}"></child-element>`;

据我目前的了解，该代码使用 lit-html 辅助函数来创建 lit-html TemplateResult .然后在超时回调中用另一个替换它:

this._child = html`<child-element text="${text2}"></child-element>`;

因此，您的代码不是只重绘发生变化的内容(字符串)，而是创建一个新的 TemplateResult 并重绘它。如您所述，这还会再次调用子元素构造函数并导致文本节点暂时未定义。这是添加到您的 impl 的控制台输出，以显示何时为父子调用构造函数和渲染函数:

https://stackblitz.com/edit/lit-element-example-ftlbz7?file=index.js

通过检查 DOM 树，您的示例生成了这个 DOM 结构:

<parent-element>
  #shadow-root
    <div>
      <child-element>
        #shadow-root
          <div>

假设我需要生成相同的 DOM 结构并更新相同的文本节点以响应超时回调，我可能会在父渲染函数中处理它:

_render({ parenttext }) {
  return html`<div><child-element text="${parenttext}"></child-element></div>`;
}

这确保子构造函数只被调用一次，并且只有实际更改的数据才会被重绘。

如果我理解正确，这就是 lit-element 的设计用途(将应用程序或元素的渲染表示为其数据的函数)。这样我们就可以依靠浏览器来重新绘制对数据的任何更改。这在理论上应该更快(尽管我还没有测试过)。

这里的代码示例:

https://stackblitz.com/edit/lit-element-example-exrlxw?file=parent-element.js

了解我在您的测试中遗漏了什么，我可以进一步研究它。

---

编辑添加:

我注意到重写 _shouldRender 以防止元素使用未定义的属性渲染会阻止元素使用未定义的属性渲染，但它没有修复 _firstRendered，这是当 props 未定义时仍然触发。

_firstRendered 与 _didRender 不同，它不是 _render 的结果；它是 called from the ready() callback ，它继承自 Polymer's properties-changed mixin .在 Polymer 中，ready() 在元素添加到 DOM 时触发。我认为到那时应该初始化属性，所以这仍然很奇怪。

无论如何，这意味着可以创建一个从不渲染的元素(即 _shouldRender 总是返回 false)，但 _firstRendered 仍然会触发。哈哈。示例:https://stackblitz.com/edit/lit-element-first-rendered?file=index.js .

老实说，我不确定该怎么做。我将在 lit-element github 上提出问题当我从文档中阅读更多内容时(或者你可以，如果你先到达那里)。