title: Polymer ready() and event listeners
body: <p>I am running into weird behaviour when following examples from polymer website on custom event creation and delegation (<a href="https://www.polymer-project.org/articles/communication.html" rel="nofollow noreferrer">https://www.polymer-project.org/articles/communication.html</a>). I have polymer tabs firing my custom event when the tab changes, and now I am trying for my another custom element to listen for an event and react, but there is something I am missing obviously, as the event is not being picked up from within <code>ready()</code> function. However, if I bind it to window, I can see it fires without any problems, so a second pair of eyes would be appreciated :)</p>
  <p>This is the custom element firing an event when tab is changed:</p>
  <pre><code>&lt;polymer-element name=&quot;pm-tabmenu&quot;&gt;
      &lt;template&gt;
          &lt;style&gt;
              :host {
                  display:block;
              }
          &lt;/style&gt;
          &lt;paper-tabs selected=&quot;1&quot; id=&quot;tabmenu&quot;&gt;
              &lt;paper-tab id=&quot;pm-tabmenu-all&quot; state=&quot;all&quot;&gt;All&lt;/paper-tab&gt;
              &lt;paper-tab id=&quot;pm-tabmenu-wip&quot; state=&quot;wip&quot;&gt;In Progress&lt;/paper-tab&gt;
              &lt;paper-tab id=&quot;pm-tabmenu-finished&quot; state=&quot;finished&quot;&gt;Finished&lt;/paper-tab&gt;
          &lt;/paper-tabs&gt;
      &lt;/template&gt;
      &lt;script&gt;
  
          Polymer({
              ready: function () {
                  var tabs = this.$.tabmenu;
                  tabs.addEventListener('core-select', function (event) {
                      if (event.detail.isSelected) {
                          this.fire(&quot;pmtabmenuselect&quot;, {
                              state: event.detail.item.getAttribute('state')
                          });
                          alert(event.detail.item.getAttribute('state'));                         
                      }
                  });
              }
          });
      &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  <p>This is how I want to capture an event in another custom element:</p>
  <pre><code>&lt;polymer-element name=&quot;pm-list&quot;&gt;
      &lt;template&gt;
          &lt;style&gt;
              :host {
                  display:block;
              }
          &lt;/style&gt;
          &lt;h1&gt; Current filter: {{filter}}&lt;/h1&gt;
      &lt;/template&gt;
      &lt;script&gt;
          window.addEventListener('pmtabmenuselect', function (e) {
              alert(&quot;This does fire&quot;);
          });
          Polymer({
              filter: &quot;Not yet defined&quot;,
              ready: function () {
                  this.addEventListener('pmtabmenuselect', function (e) {
                      alert(&quot;This does not fire&quot;);
                  });
              }
          });
       &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  <p>In the index file both elements are included and then invoked, but there is no  section as I would not think it is needed at the moment.</p>
  <pre><code>&lt;core-header-panel flex main&gt;
              &lt;core-toolbar class=&quot;medium-tall&quot;&gt;
                  &lt;paper-icon-button icon=&quot;menu&quot; core-drawer-toggle&gt;&lt;/paper-icon-button&gt;
                  &lt;div flex&gt;Tests&lt;/div&gt;
                  &lt;paper-icon-button icon=&quot;search&quot;&gt;&lt;/paper-icon-button&gt;
                  &lt;paper-icon-button icon=&quot;more-vert&quot;&gt;&lt;/paper-icon-button&gt;
  
                  &lt;div class=&quot;bottom fit&quot; horizontal layout&gt;
                      &lt;pm-tabmenu flex style=&quot;max-width: 600px;&quot;&gt;&lt;/pm-tabmenu&gt;
                  &lt;/div&gt;
              &lt;/core-toolbar&gt;
              &lt;pm-list&gt;&lt;/pm-list&gt;
          &lt;/core-header-panel&gt;
  </code></pre>