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

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('*')如果可能的话，有更具体的东西。