title: Event Retargetting of the Focus and Blur Events
body: <p>I have a custom Polymer element that is meant to represent a complex input type. It contains an actual <code>input</code> tag inside its Shadow DOM, like this:</p>
  
  <pre><code>&lt;polymer-element name="my-input"&gt;
    &lt;template&gt;
      &lt;input type="text" on-blur="{{onBlur}}" on-focus="{{onFocus}}"/&gt;
    &lt;/template&gt;
    &lt;script&gt;
      Polymer('my-input', {
        onBlur: ...,
        onFocus: ...
      });
    &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p>Currently, <code>focus</code> and <code>blur</code> events are leaking to outside listeners when the user clicks between the internal input and other areas within the custom element. If you open the Dev Tools Console in <a href="http://codepen.io/anon/pen/lecwq?editors=101" rel="nofollow">this CodePen</a>, you'll see internal and external focus and blur events happening even when clicking between the input and the surrounding green area (which is all inside the custom element).</p>
  
  <p>Is there no way to capture the <code>focus</code> and <code>blur</code> events inside my custom element so I can only fire them when actually focusing and blurring the entire custom element?</p>