lit元素查询()返回null

Question

我使用query()引用lit元素。例如

@query('#first')
_first;

但是，lit元素尚未呈现给dom，#first返回null。当我执行this._first = null时。我能做些什么来确保第一个不为空？我如何才能等待lit元素被呈现给dom？

Answer 1

正如您提到的，由于元素尚未呈现，@query将在初始更新完成之前返回null。

一个可能的选择是使用@queryAsync装饰器。它没有同步返回元素或null，而是返回承诺，在任何挂起的呈现完成后解析为查询节点。

另一个选项是等待this.updateComplete，它还允许您在查询呈现的DOM之前等待任何挂起的更新完成。例如，在链接的updateComplete文档中：“在编写测试时，您可以等待updateComplete承诺，然后再对组件的DOM进行断言。”

await this.updateComplete; // Wait for pending update to render #first
this._first // Result of querying for #first on rendered DOM in this.renderRoot.