События 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, работающим на локальном хосте, событие отправлялось из компонента до того, как прослушиватель событий был подключен к странице хоста.
Я полагаю, что идеальным сценарием было бы, чтобы веб-компонент ожидал, пока прослушиватель событий на хосте не будет подключен, прежде чем транслировать событие.