Question

我正在运行Chrome 56.0.x（公司授权）以及Polymer 2.我的样本组件并没有做任何花哨的事情。只需在进行简单的AJAX调用后引发CustomEvent。我设置＆＃34;起泡＆＃34;：true和＆＃34;撰写＆＃34;：true，我可以验证事件是否已发送以及我的主机是否正在正确地监听事件。

样品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中修复此问题，则不知道。

Answer 1

罪魁祸首是时机......

在Chrome中，打开Dev Tools并在localhost上运行，事件是在事件侦听器连接到主机页面之前从组件调度的。

Event Timing

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

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

1 个答案: