Событие для веб-компонента "загрузил все и нарисовал на экране"

Question

У меня есть веб-компонент, который по сути инкапсулирует мое приложение. В его теневой DOM есть другие веб-компоненты (и стандартные встроенные HTML / CSS + внешние / скрипты встроенные + экстенальные), и эти веб-компоненты могут, в свою очередь, содержать других в своей теневой DOM ... и т. Д.

У меня есть загрузочный оверлей, который я хочу показать, пока все не загрузится и не прорисовано / не стилизовано и т. Д. *

Я чувствую, что должно быть какое-то событие, к которому я могу подключиться. Я провел небольшой поиск, который, кажется, предлагает нет, но, учитывая его развитие, я думаю, что все могло измениться? Если нет события - как я мог бы написать это сам?

Только при таргетинге на Chrome 71

Answer 1

Простой ответ - нет. Нет волшебного события, которое знает, когда ваше приложение будет завершено.

Чтобы сделать эту работу, вы должны предоставить событие.

Ваш код должен знать, когда он завершит загрузку, а затем отправить событие, на которое можно выполнить действие.

Проблема связана с тем, что никто не знает, закончен ли ваш код, кроме вас, разработчика. Вам нужно будет дождаться окончания загрузки каждого фрагмента, а затем, когда вы узнаете, что все закончено, вы все равно захотите дать браузеру время на рендеринг всего. Таким образом, вы отправите свое событие только после того, как предоставите браузеру это время.

Вы можете сделать это так:

class MyAppClass extends HtmlElement {
  // The rest of your class is defined by you
  
  codeAllFinished() {
    setTimeout(() => {
      this.dispatchEvent(new CustomEvent('all-finished));
    },0);
  }
}

Вы вызываете функцию codeAllFinished только после того, как узнаете, что ваш код завершил сбор данных и создание элементов DOM.

Тайм-аут позволит браузеру отображать события, а затем вы отправите событие, чтобы кто-нибудь знал, что вы закончили.