_actually_更​​新所有子元素后，运行函数

Question

在lit-html中，我们提供了firstUpdated()方法，可在元素呈现后立即运行一次初始化。

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

现在我做的很糟糕：

  firstUpdated () {
    super.firstUpdated()

    setTimeout(() => this.onceChildrenAreUpdated(), 100)
  }

肯定有更好的方法吗？ 我意识到这很棘手，因为对于浅色元素，“渲染”意味着DOM已经完成；这并不意味着里面的所有元素都完成了初始化之后想要做的任何事情。

但还是...

Answer 1

您可以等待所有孩子的更新：

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

在可能的情况下用更具体的内容替换querySelectorAll('*')。