一旦所有子元素_实际上_更新，就运行一个函数

Question

在 lit-html 中，我们有firstUpdated()方法在元素渲染后运行一次性初始化。

如果仅在更新该模板中的所有子项后才需要运行函数，该怎么办？ 如果您的模板包含本机表单元素和自定义表单元素怎么办？

现在我正在做一个可怕的事情：

firstUpdated () {
super.firstUpdated()
setTimeout(() => this.onceChildrenAreUpdated(), 100)
}

肯定有更好的方法吗？ 我意识到这很棘手，因为对于 lit-element "渲染"意味着 DOM 已经完成;这并不意味着里面的所有元素都完成了想要执行的任何初始化。

但是...

Answer 1

您可以等待所有子项更新：

async firstUpdated () {
const children = this.shadowRoot.querySelectorAll('*'));
await Promise.all(Array.from(children).map((c) => c.updateComplete));
this.onceChildrenAreUpdated();
}

如果可能，将querySelectorAll('*')替换为更具体的内容。