时间戳

首页 > 解决方案 > Chrome（打开）Shadow DOM 事件未到达主机

google-chrome - Chrome（打开）Shadow DOM 事件未到达主机

问题描述

我正在运行 Chrome 56.0.x（企业授权）和 Polymer 2。我的示例组件没有做任何花哨的事情；只需在进行简单的 AJAX 调用后引发 CustomEvent 。我正在设置“bubbles”：true 和“composed”：true，我可以验证事件是否已分派，并且我的主机是否正在正确侦听该事件。

示例组件.html

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

但是，这些事件永远不会从 Shadow DOM 中传给我的主机页面侦听器。

索引.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 中开发/测试时，我几乎总是打开开发工具。我奇怪地注意到，当我的工具打开时，主机页面（index.html）没有捕获该事件......但这似乎只发生在本地。当我关闭工具并在本地加载页面时，事件会正确冒泡……但这仅适用于与显式用户操作无关的调度事件；无论工具是否打开，这些似乎都有效。

当我访问我创建的简单 Azure 应用程序时 - http://samplepolymertwo.azurewebsites.net/index.html - 无论工具是否打开，所有事件都会冒泡/捕获。

不知道这是否在最新版本的 Chrome 中得到修复。

标签： google-chromepolymershadow-dompolymer-2.0

解决方案

罪魁祸首是所有的时间......

在 Chrome 中，打开开发工具并在 localhost 上运行，在事件侦听器连接到主机页面之前，从组件中分派了事件。

活动时间

我想理想的情况是让 Web 组件等到主机上的事件侦听器连接好后再广播事件。

推荐阅读