title: How do I bind a function to elements inside of a Shadow DOM?
body: <p>I'm working with Web Components and try to bind a <code>click</code> event to an element inside of the Shadow DOM.</p>
  
  <p><strong>1. component.html included as <code>&lt;link rel="import" ...&gt;</code> inside of index.html</strong></p>
  
  <pre><code>&lt;template id="my-element"&gt;
      &lt;section&gt;
          &lt;header&gt;
              &lt;content select="h1"&gt;&lt;/content&gt;
              &lt;button&gt;&lt;/button&gt;
          &lt;/header&gt;
          &lt;content select="div"&gt;&lt;/content&gt;
      &lt;/section&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><strong>2. later element usage:</strong></p>
  
  <pre><code>&lt;my-element&gt;
      &lt;h1&gt;Headline&lt;/h1&gt;
      &lt;div&gt;...&lt;/div&gt;
  &lt;/my-element&gt;
  </code></pre>
  
  <p><strong>3. Access element and bind a function to it</strong></p>
  
  <p>Now I want to <em>add</em> an <code>addEventListener()</code> to the <code>&lt;button&gt;</code> inside of my <code>&lt;my-element&gt;</code> <em>(which is unfortunately hidden through the <code>#shadow-root</code>)</em>. Like:</p>
  
  <pre><code>var elemBtn = document.querySelector('my-element button');
  elemBtn.addEventListener('click', function(event) {
      // do stuff
  });
  </code></pre>
  
  <p>But that won't work. <strong>How do I achieve that?</strong> </p>