Determine if user clicked outside shadow dom : <p>I'm trying to implement a dropdown which you can click outside to close. The dropdown is part of a custom date input and is encapsulated inside the input's shadow DOM.</p>

<p>I want to write something like:</p>

<pre><code>window.addEventListener('mousedown', function (evt) {
  if (!componentNode.contains(evt.target)) {
    closeDropdown();
  }
});
</code></pre>

<p>however, the event is retargeted, so <code>evt.target</code> is <em>always</em> the outside the element. There are multiple shadow boundaries that the event will cross before reaching the window, so there seems to be no way of actually knowing if the user clicked inside my component or not.</p>

<p><b>Note:</b> I'm not using polymer anywhere -- I need an answer which applies to generic shadow DOM, not a polymer specific hack.</p>
