title: How to separate Polymer button and dialog
body: <p>In the polymer dialog demo they have code like this:</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;script src=
  https://github.com/webcomponents/webcomponentsjs/blob/master/webcomponents.js&gt;
  &lt;link rel="import" href="https://github.com/Polymer/polymer/blob/master/polymer.html"&gt;
  
  &lt;link rel="import" href="https://github.com/PolymerElements/paper-button/blob/master/paper-button.html"&gt;
  &lt;link rel="import" href="https://github.com/PolymerElements/paper-dialog/blob/master/paper-dialog.html"&gt;
  
  &lt;section onclick="clickHandler(event)"&gt;
    &lt;h4&gt;Transitions&lt;/h4&gt;
    &lt;paper-button data-dialog="animated"&gt;transitions&lt;/paper-button&gt;
    &lt;paper-dialog id="animated" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop&gt;
      &lt;h2&gt;Dialog Title&lt;/h2&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
    &lt;/paper-dialog&gt;
  &lt;/section&gt;
  
  &lt;script&gt;
    function clickHandler(e) {
      var button = e.target;
      while (!button.hasAttribute('data-dialog') &amp;&amp; button !== document.body) {
        button = button.parentElement;
      }
  
      if (!button.hasAttribute('data-dialog')) {
        return;
      }
  
      var id = button.getAttribute('data-dialog');
      var dialog = document.getElementById(id);
      if (dialog) {
        dialog.open();
      }
    }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to wrap the button (or fab in my case) and the dialog into my own seperate web components.</p>
  
  <p>I created a dialog-button that tried to wrap the button and the event:</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;paper-fab class="addbutton" icon="add" onclick="clickHandler(event)"&gt;&lt;/paper-fab&gt;
  
  &lt;/template&gt;
  &lt;script&gt;
    Polymer({
      is: 'my-dialog-button',
      properties: {
  
        dialog_id: {
          type: String
        },
  
      }
    })
  
  
    function clickHandler(e) {
  
      var button = e.target;
      while (!button.hasAttribute('dialog_id') &amp;&amp; button !== document.body) {
        button = button.parentElement;
      }
  
      if (!button.hasAttribute('dialog_id')) {
        console.log("you have no element with 'dialog_id' defined")
        return;
      }
  
  
      var id = button.getAttribute('dialog_id');
      console.log("dialog " + id + " requested")
      var dialog = document.getElementById(id);
      if (dialog) {
  
        dialog.open();
      } else {
        console.log("dialog " + id + " does not exist")
      }
    }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>which allows me the following to work:</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;thor-dialog-button dialog_id="add-button"&gt;&lt;/thor-dialog-button&gt;
  &lt;paper-dialog id="add-button"&gt;
    &lt;h2&gt;"Hello"&lt;/h2&gt;
    &lt;p&gt;"World"&lt;/p&gt;
  &lt;/paper-dialog&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However as soon as I wrap the dialog in its own component, the "id" is no longer available in that dom context. So it doesn't work.</p>
  
  <p>I was thinking the ID approach doesnt really work and I need to bind the dialog "open" to the button "onclick" but I have no idea how to do that, I have found:</p>
  
  <p><a href="https://www.polymer-project.org/1.0/docs/devguide/templates.html" rel="nofollow">https://www.polymer-project.org/1.0/docs/devguide/templates.html</a></p>
  
  <p>But i am not sure how to apply this to wrapped elements (or at least I have spectacularly failed on that approach so far).</p>
  
  <p>In summary, what is the correct way to separate 2 wrapped web components and what would it look like?</p>