运行 所有子元素_实际_更新后的函数

Question

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

如果您只需要 运行 更新该模板中的所有子项后的函数怎么办？ 如果您的模板包含原生表单元素和自定义表单元素怎么办？

现在我做的很糟糕：

  firstUpdated () {
    super.firstUpdated()

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

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

但还是...

Answer 1

您可以等待所有children更新：

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

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