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組件在廣播事件之前要等到主機上的事件偵聽器已連接好為止。