Bugfix/inside shadow dom

[dsappet]

Fixes #64

If an event is fired from within a component with shadow DOM and listened to outside (like document or window), the event.target will not pierce the shadow DOM and show as the top level component. For example, listening to a click event on the document in the following situation (if foo-bar had a shadow dom)

<foo-bar>
  <duet-date-picker></duet-date-picker>
</foo-bar>

will have foo-bar as the event target! Therefore the condition if (this.dialogWrapperNode.contains(target) || this.datePickerButton.contains(target)) { will not be met because target always returns a parent node!

Enter composedPath to the rescue. https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath
It returns an array of nodes and will contain shadow dom nodes as long as it is open.
I realized that composedPath is not supported in IE (IE doesn't support shadow dom at all), so if composedPath is available it will be used, otherwise it will fallback to target.

[WickyNilliams]

Hey sorry about the delay on this!

I've been doing some testing, and it turns out that stencil polyfills composedPath for older browsers, so no need to feature test.

In which case I think the logic can be:

const isClickOutside = e
  .composedPath()
  .every(node => node !== this.dialogWrapperNode && node !== this.datePickerButton)

if (isClickOutside) {
  this.hide(false)
}

[dsappet]

@WickyNilliams Updated per your suggestion.

[WickyNilliams]

@dsappet awesome, thanks. I'll get this merged and released next week

[WickyNilliams]

Released in v1.3.0