0

I'm running Chrome 56.0.x (corporate mandate), along with Polymer 2. My sample component isn't doing anything fancy; just raising a CustomEvent after making a simple AJAX call. I'm setting "bubbles":true and "composed":true, and I can validate that the event is dispatched and that my host is listening for the event properly.

sample-component.html

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

However, the events never make it out of the Shadow DOM to my host page listeners.

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);
  });

Interestingly enough, when I have a user initiated event (e.g. click) trigger this CustomEvent, it happily makes its way through the Shadow DOM to my listener. It's just the events that are programmatically created that are getting stuck.

UPDATE 1

This issue only seems to manifest itself when I'm serving my site locally (e.g. http://localhost, http://127.0.0.1, http://COMPUTERNAME). When I publish the site to another host, all the events seem to propagate as expected. Feels to me more like a Chrome issue at this point...

UPDATE 2

I put my code out on github here: https://github.com/davidfilkins/polymer-test.

I did some more testing and the results keep getting weirder... when I'm developing / testing in Chrome, I almost always have Dev Tools open. I noticed strangely enough that when my tools are open, that the event isn't captured by the host page (index.html)... but this seems to only happen locally. When I close tools and load the page locally, the events bubble properly... But this is only for the dispatched events that aren’t tied to an explicit user action; those all seem to work regardless of the tools being open or not.

When I access the simple Azure app that I created - http://samplepolymertwo.azurewebsites.net/index.html - all events are bubbled / captured regardless of whether the tools are open.

No clue if this is fixed in more current versions of Chrome or not.

David Filkins
  • 1
  • 3
  • have you tried to listen for an event directly on element? like ``. Plus, if you are using elements inside `index.html` you should also use `dom-bind`. https://www.polymer-project.org/2.0/docs/devguide/templates – Kuba Šimonovský Jun 12 '18 at 12:03
  • Thanks for the suggestion @KubaŠimonovský. I gave it a shot to no avail. Do I really need dom-bind in index.html? I don't think I do... my index page isn't doing anything but hosting my sample-component. – David Filkins Jun 12 '18 at 15:03
  • Interestingly enough, I published my sample app out to Azure here http://samplepolymertwo.azurewebsites.net/index.html and the events all seem to bubble up just fine. I tested on another server; same thing. It seems like this event is only getting trapped when I access the site locally (e.g. localhost, 127.0.0.1, or my COMPUTERNAME). Weird, right? – David Filkins Jun 12 '18 at 15:07
  • I'd rather suppose it's an issue in Polymer that won't bind the event handle correctly, because it works fine with vanilla web compontents (without polymer). Can you reproduce the issue with the last version of Chrome? – Supersharp Jun 12 '18 at 21:46

1 Answers1

0

The culprit was all timing...

In Chrome, with Dev Tools open, running on localhost, the event was dispatched from the component before the event listener was wired up on the host page.

Event Timing

I suppose the ideal scenario would be for the web component to wait until the event listener on the host had been wired up before broadcasting the event.

David Filkins
  • 1
  • 3