title: Polymer 1.0 custom fire event not catching
body: <p>I have trouble to catch a custom event that fired from my-login Element with a button to the my-overview Element. I really have no clue why this is not working.</p>
  
  <p><strong>index.html</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;iron-pages attr-for-selected="data-route" selected="{{route}}"&gt;
    &lt;section data-route="login"&gt;
      &lt;paper-material id="pmLogin" elevation="1"&gt;
        &lt;paper-toolbar&gt;
          &lt;h1 class="paper-font-display1"&gt;&lt;span&gt;Login&lt;/span&gt;&lt;/h1&gt;
        &lt;/paper-toolbar&gt;
        &lt;my-login id="elLogin"&gt;&lt;/my-login&gt;
      &lt;/paper-material&gt;
    &lt;/section&gt;
  
    &lt;section data-route="overview"&gt;
      &lt;paper-material id="pmOverview" elevation="1"&gt;
        &lt;paper-toolbar&gt;
          &lt;h1 class="paper-font-display1"&gt;&lt;span&gt;Overview&lt;/span&gt;&lt;/h1&gt;
        &lt;/paper-toolbar&gt;
        &lt;my-overview id="elOverview"
                     on-call-overview-refresh="reloadOverview"&gt;
        &lt;/my-overview&gt;
      &lt;/paper-material&gt;
    &lt;/section&gt;
  &lt;/iron-pages&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>my-login.html</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>routeTo: function(route) {
    var app = document.querySelector('#app');
    app.route = route;
    this.fire('call-overview-refresh');
  },</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>my-overview.html</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>reloadOverview: function() {
    ...
  }</code></pre>
  </div>
  </div>
  </p>