События Chrome (открытые) Shadow DOM не достигают хоста

Я использую Chrome 56.0.x (корпоративный мандат) вместе с Polymer 2. Мой примерный компонент не делает ничего особенного; просто подняв CustomEvent после простого вызова AJAX. Я устанавливаю "пузыри": правда и "составлено": правда, и я могу проверить, что событие отправлено, и что мой хост слушает событие правильно.

Образец-component.html

raiseDataRetrievedEvent() {
        this.dispatchEvent(
          new CustomEvent('sample-component-data-retrieved', {
            bubbles: true,
            composed: true,
            detail: { data: "loading complete" }
          }));
      }

Тем не менее, события никогда не выходят из Shadow DOM для моих слушателей главной страницы.

index.html

// Listen to Custom event from Sample Component
  document.querySelector('sample-component').addEventListener('sample-component-data-retrieved', function (e) {
    alert(e.detail);
    console.log(e.detail);
  });

Интересно, что когда я запускаю событие CustomEvent, инициируемое пользователем (например, щелчок), оно успешно проходит через Shadow DOM для моего слушателя. Это просто события, которые программно создаются, которые застревают.

ОБНОВЛЕНИЕ 1

Эта проблема проявляется только тогда, когда я обслуживаю свой сайт локально (например, http://localhost/, http://127.0.0.1/, http: // COMPUTERNAME). Когда я публикую сайт на другом хосте, все события развиваются, как и ожидалось. На данный момент мне больше нравится проблема Chrome...

ОБНОВЛЕНИЕ 2

Я разместил свой код на github здесь: https://github.com/davidfilkins/polymer-test.

Я провел еще несколько тестирований, и результаты продолжают становиться более странными... когда я занимаюсь разработкой / тестированием в Chrome, у меня почти всегда открыты Dev Tools. Я достаточно странно заметил, что когда мои инструменты открыты, событие не регистрируется на главной странице (index.html)... но, похоже, это происходит только локально. Когда я закрываю инструменты и загружаю страницу локально, события всплывают должным образом... Но это только для отправленных событий, которые не связаны с явным действием пользователя; кажется, что все они работают независимо от того, открыты инструменты или нет.

Когда я получаю доступ к простому приложению Azure, которое я создал - http://samplepolymertwo.azurewebsites.net/index.html - все события заполняются / записываются независимо от того, открыты ли инструменты.

Не знаю, исправлено ли это в более поздних версиях Chrome или нет.

1 ответ

Виновником было все время...

В Chrome с открытым Dev Tools, работающим на локальном хосте, событие отправлялось из компонента до того, как прослушиватель событий был подключен к странице хоста.

Время проведения

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

Другие вопросы по тегам