title: Polymer: open modal with dynamic id
body: <pre><code>&lt;dom-module id="profile-post"&gt;
  --------------------------
  &lt;template&gt;
      &lt;paper-button onclick="friends[[post_id]].open()"&gt;Invite here&lt;/paper-button&gt;
      &lt;paper-dialog id="friends[[post_id]]" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop&gt;
  &lt;/template&gt;
  &lt;dom-module&gt;
  </code></pre>
  
  <p>Other file in my app calls profile-post</p>
  
  <pre><code>&lt;template is="dom-repeat" items="{{ajaxResponse.objects}}" as="post"&gt;
      &lt;div class="wall"&gt;
          &lt;div id="new_post_here"&gt;&lt;/div&gt;
          &lt;profile-post
              photos      = "{{ post.photos }}"
              date        = "{{ post.date }}"
              message     = "{{ post.message }}"
              place_name  = "{{ post.place_name }}"
              post_id     = "{{ post.id }}"
              class       = "post"&gt;
          &lt;/profile-post&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>All values in square brackets are attributes for my own-element. Own-element has simple template, but from another part of my app i call this element inside dom-repeat. Paper-dialog doesn't open.</p>
  
  <p>I solve this problem in such way:</p>
  
  <pre><code>             &lt;paper-button id="bp[[post_id]]" onclick="friends[[post_id]].open()"&gt;Invite here&lt;/paper-button&gt;
               &lt;paper-dialog id="friends[[post_id]]" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop&gt;
  
      openMap: function (e) {
          console.log('openMap');
          if(e.target.id == ('bm'+this.post_id)){
              document.getElementById('map'+this.post_id).open();
          }else if(e.target.id == ('bp'+this.post_id)){
              document.getElementById('friends'+this.post_id).open();
          }
      }
  </code></pre>
  
  <p>But it's not beautiful</p>