Chrome（开放式）Shadow DOM事件未到达主机

Question

我正在运行Chrome 56.0.x（企业授权）以及Polymer2。我的示例组件没有做任何花哨的事情； 只需通过简单的AJAX调用就引发CustomEvent。 我正在设置“ bubbles”：true和“ composed”：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）捕获...但这似乎仅在本地发生。 当我关闭工具并在本地加载页面时，事件会冒泡……但这仅适用于与明确的用户操作无关的已调度事件。 无论工具是否打开，这些工具似乎都可以工作。

当我访问我创建的简单应用程序天青- http://samplepolymertwo.azurewebsites.net/index.html -所有的事件都冒泡/无论工具是否开放抓获。

不知道是否在更新的Chrome版本中已解决此问题。

Answer 1

罪魁祸首是时候了...

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

事件时间

我认为理想的情况是Web组件在广播事件之前要等到主机上的事件侦听器已连接好为止。