title: Get Polymer element that was clicked on from event
body: <p>I want to create a custom Polymer element that behaves like a button and has some HTML layout. Say:</p>
  
  <pre><code>&lt;link rel="import" href="../../bower_components/polymer/polymer.html"&gt;
  &lt;link rel="import" href="../../bower_components/iron-behaviors/iron-button-state.html"&gt;
  &lt;link rel="import" href="../../bower_components/iron-behaviors/iron-control-state.html"&gt;
  
  &lt;dom-module id="trivial-button"&gt;
  
      &lt;template&gt;
          &lt;style&gt;
          :host {
              display: inline-block;
              position: relative;
              background-color: #FFFFFF;
              width: 100%;
          }
          &lt;/style&gt;
  
          &lt;content style="color: #000000;"&gt;
          &lt;/content&gt;
          &lt;p style="color: #000000;"&gt;some brabbling&lt;/p&gt;
      &lt;/template&gt;
  
  &lt;/dom-module&gt;
  
  &lt;script&gt;
  
      Polymer({
          is: 'trivial-button',
  
          that: this,
  
          behaviors: [
              Polymer.IronButtonState,
              Polymer.IronControlState
          ],
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I want to use this component in my page several times, like so:</p>
  
  <pre><code>&lt;link rel="import" href="../../bower_components/polymer/polymer.html"&gt;
  &lt;link rel='import' href='trivial-button.html'&gt;
  
  &lt;dom-module id="page-browse"&gt;
  
      &lt;template&gt;
          &lt;style include="triggi-colors"&gt;
              :host {
                  display: block;
                  box-sizing: border-box;
                  padding: 10px;
              }
          &lt;/style&gt;
  
          &lt;trivial-button id='myFirstBytton' on-tap="handleTapped"&gt;1stButtonText&lt;/trivial-button&gt;
          &lt;trivial-button id='mySecondBytton' on-tap="handleTapped"&gt;2ndButtonText&lt;/trivial-button&gt;
  
      &lt;/template&gt;
  
      &lt;script&gt;
  
          Polymer({
              is: 'page-browse',
  
              handleTapped: function(e) {
                  console.log('Hit the button!');
                  console.log(e.target.id);
              }
          });
  
      &lt;/script&gt;
  
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>Now, when one of the instances is clicked, I want to access the properties of the top-level polymer object that is the button, so that I could for example do buttonReference.id. It seems that event.target is the way to go, however in my attempts event.target turns out to point to the exact HTML element that was clicked on, not to the polymer element that the HTML element is part of. Is there any way to retrieve the polymer element itself in the handler?</p>