Chrome (открытый) события Shadow DOM не достигают хоста - PullRequest
0 голосов
/ 11 июня 2018

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

sample-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) ...но это, кажется, происходит только локально. Когда я закрываю инструменты и загружаю страницу локально, события всплывают должным образом ... Но это только для отправленных событий, которые не привязаны к явному действию пользователя; все они, кажется, работают независимоиз инструментов, являющихся опеn или нет.

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

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

1 Ответ

0 голосов
/ 14 июня 2018

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

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

Время события

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...