Chrome（打开）Shadow DOM 事件未到达主机答案

【问题标题】：Chrome (open) Shadow DOM Events Not Reaching HostChrome（打开）Shadow DOM 事件未到达主机
【发布时间】：2018-11-21 02:54:43
【问题描述】：

我正在运行 Chrome 56.0.x（企业授权）和 Polymer 2。我的示例组件没有做任何花哨的事情；只需在进行简单的 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 中开发/测试时，我几乎总是打开开发工具。我奇怪地注意到，当我的工具打开时，主机页面（index.html）没有捕获该事件......但这似乎只发生在本地。当我关闭工具并在本地加载页面时，事件会正确冒泡……但这仅适用于与显式用户操作无关的调度事件；无论工具是否打开，这些似乎都可以工作。

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

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

【问题讨论】：

您是否尝试过直接在元素上监听事件？喜欢<sample-component on-component-data-retrieved="someFunction"></sample-component>。另外，如果你在index.html 中使用元素，你也应该使用dom-bind。 polymer-project.org/2.0/docs/devguide/templates
感谢@KubaŠimonovský 的建议。我试了一下没有用。我真的需要 index.html 中的 dom-bind 吗？我不认为我这样做......我的索引页面除了托管我的示例组件之外什么也没做。
有趣的是，我在这里 samplepolymertwo.azurewebsites.net/index.html 将我的示例应用程序发布到 Azure 并且事件似乎都很好。我在另一台服务器上测试过；一样。似乎只有当我在本地访问该站点（例如 localhost、127.0.0.1 或我的 COMPUTERNAME）时，此事件才会被困住。很奇怪，对吧？
我宁愿认为这是 Polymer 中的一个问题，无法正确绑定事件句柄，因为它适用于 vanilla web 组件（没有聚合物）。您能否使用最新版本的 Chrome 重现该问题？

标签： google-chrome polymer shadow-dom polymer-2.0

【解决方案1】：

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

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

Event Timing

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

【讨论】：