title: Polymer 1.0: How to pass an argument to a Polymer function from an attribute?
body: <p>Is there a way to pass an argument to a Polymer function from an element attribute inside its <code>&lt;template&gt;</code>?</p>
  
  <pre><code>&lt;script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"&gt;&lt;/script&gt;
  &lt;link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html" /&gt;
  &lt;dom-module id="example-element"&gt;
    &lt;template&gt;
      ...
      &lt;paper-button id="foo" on-tap="bar"&gt;Click&lt;/paper-button&gt;
      ...
    &lt;/template&gt;
  &lt;/dom-module&gt;
  &lt;script&gt;
    (function() {
      Polymer({
        is: 'example-element',
        properties: {...},
        bar: function(arg){
          // Do stuff using argument arg
        }
      });
    })();
  &lt;/script&gt;
  </code></pre>
  
  <h3>Background Research</h3>
  
  <p>I have combed through <a href="https://www.polymer-project.org/1.0/docs/devguide/feature-overview.html">the documentation</a> which appears silent on the matter. It doesn't say whether you can or can not. But when I try it, it fails. But maybe I'm not doing it correctly. So I need some assistance.</p>
  
  <p>The only thing I have come across is <a href="https://www.polymer-project.org/1.0/docs/devguide/events.html">event listeners</a> which doesn't seem to be able to take the arguments I want to pass. Say, an <code>id</code> or a <code>name</code>.</p>
  
  <h3>Previous Attempts</h3>
  
  <p>I have tried (unsuccessfully) doing things like:</p>
  
  <pre><code>&lt;paper-button id="foo" on-tap="bar('foo')"&gt; Click &lt;/paper-button&gt;
  </code></pre>
  
  <p>but nothing seems to work.</p>
  
  <p>The event listeners idea doesn't work because they limit the arguments and I can't get the, say, <code>id</code> I need.</p>