javascript - Why doesn't element catch event when using dispatchEvent from sibling polymer element?

Question

I have the following polymer element in my UI which has two polymer elements, baseline-policy-create and baseline-policy-domain-ajax.

<dom-module id="baseline-policies-tab">
  <template>
    <style include="dfw-styles">
      :host {
        display: block;
      }
    </style>
    <baseline-policy-create></baseline-policy-create>
    <baseline-policy-domain-ajax></baseline-policy-domain-ajax>
  </template>

  <script>

    class BaselinePoliciesTab extends Polymer.Element {
      static get is() {
        return 'baseline-policies-tab';
      }

      static get properties() {
      }
    }
    customElements.define(BaselinePoliciesTab.is, BaselinePoliciesTab);

  </script>
</dom-module>

In my baseline-policy-create element I have a dropdown button that allows me to choose either "Package" or "Subscription". When I select one of them, I dispatch a CustomEvent that should trigger the listener I have registered in baseline-policy-domain-ajax. Here is the code for baseline-policy-create:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../shared-styles.html">
<link rel="import" href="../../bower_components/dfw-styles/dfw-styles.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">

<dom-module id="baseline-policy-create">
  <template>
    <style include="dfw-styles">
      :host {
        display: block;
      }
      .top-button{
        float : right;
      }
    </style>

    <div class="outer-buttons">
      <paper-menu-button horizontal-align="right" no-overlap="true" no-animations class="top-button">
        <paper-button slot="dropdown-trigger" class="dropdown-trigger create-button btn-primary">
          <iron-icon icon="menu"></iron-icon>
          <span>Create Baseline Policy</span>
        </paper-button>
        <paper-listbox slot="dropdown-content" class="dropdown-content">
          <template is="dom-repeat" items="{{_domains}}">
            <paper-item on-tap="_getDomainSchema">[[item.label]]</paper-item>
          </template>
        </paper-listbox>
      </paper-menu-button>
    </div>
  </template>
  <script>
    class BaselinePolicyCreate extends Polymer.Element {
      static get is() {
        return 'baseline-policy-create';
      }

      static get properties() {
        return {
          _domains: {
            type: Array,
            value: [{'name':'Package', 'label':'Package'},
                    {'name':'Subscription', 'label':'Subscription'}] //TODO: is it possible to get these values from an API source
          }
        }
      }

      _getDomainSchema(evt) {
        console.info("Get the schema for the following domain:", evt.target.innerText);
        // fire event here to trigger ajax call in baseline-policy-domain-ajax
        this.dispatchEvent(new CustomEvent('domain-ajax',{detail : evt.target.innerText}));
      }
    }
    customElements.define(BaselinePolicyCreate.is, BaselinePolicyCreate);
  </script>
</dom-module>

And here is the code for baseline-policy-domain-ajax :

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/polymer.html">


<dom-module id="baseline-policy-domain-ajax">
  <template>
    <style></style>
    <iron-ajax
      id = "getSchema"
      auto = false
      url="<removed-url-for-confidentiality>"
      params='{"domain" : "Package"}'
      handle-as="json"
      on-response="_handleResponse"
      debounce-duration="300">
      </iron-ajax>
  </template>

  <script>
    class BaselinePolicyDomainAjax extends Polymer.Element {
      static get is() { return 'baseline-policy-domain-ajax'; }

      //static get properties() {  }

      //static get observers() {  }

      connectedCallback(){
        super.connectedCallback();
        console.log("ajax element is attached! Register listeners");
        document.addEventListener('domain-ajax',this._editPage.bind(this),true);
      }

      _handleResponse(event, request) {
        console.log ('Handle Response');
        var response = request.response;
        console.log(response);
      }

      _editPage(evt){
        console.log("Change Page to New Baseline Policy");
        console.log(evt.detail);
      }
    }
    customElements.define(BaselinePolicyDomainAjax.is, BaselinePolicyDomainAjax);
  </script>
</dom-module>

I removed the url for confidentiality but I have tested the iron-ajax component and I am able to call the API successfully.

The log doesn't give me any indication on why the listener isn't "hearing" my event from the other polymer element. Any ideas on what I'm doing wrong?

Answer 1

as Mishu said in comment, events travel up in the hierarchy. So in your baseline-policies-tab you need to catch that event and pass it to baseline-policy-domain-ajax manually.

Some example:

<dom-module id="baseline-policies-tab">
<template>
<style include="dfw-styles">
  :host {
    display: block;
  }
</style>
<baseline-policy-create on-domain-ajax="_onDomainAjax"></baseline-policy-create>
<baseline-policy-domain-ajax></baseline-policy-domain-ajax>
</template>

<script>

class BaselinePoliciesTab extends Polymer.Element {
  static get is() {
    return 'baseline-policies-tab';
  }

  static get properties() {
  }

  _onDomainAjax(e) {
    this.shadowRoot.querySelector("baseline-policy-domain-ajax")._editPage(e);
  }
}
customElements.define(BaselinePoliciesTab.is, BaselinePoliciesTab);

</script>
</dom-module>