Запустите функцию, как только все дочерние элементы будут обновлены

Question

В lit-html у нас есть метод firstUpdated() для запуска однократной инициализации после рендеринга элемента.

Что если вам нужно запустить функцию только после обновления всех дочерних элементов в этом шаблоне?А что, если ваш шаблон содержит нативные элементы формы и пользовательские элементы?

Сейчас я делаю ужасное:

  firstUpdated () {
    super.firstUpdated()

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

Конечно, есть лучший способ?Я понимаю, что это сложно, потому что для lit-element «render» означает, что DOM готов;это не значит, что все элементы внутри выполнили ту инициализацию, которую захотят сделать.

Но все же ...

Answer 1

Вы можете дождаться обновления всех детей:

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

Замените querySelectorAll('*') на что-то более конкретное, если это возможно.