I ran into this issue a long while back while working with VisJs Timeline. My original comment is on the Timeline because it uses Hammer internally and used to bundle the old version. It has since switched to using this version via npm.
The root issue is that shadow-dom does event retargeting so when events are captured outside of a shadow-dom element, the event target is retargeted to the shadow-dom element. This causes issues in Hammer because it checks if the input target element has a parent matching the element Hammer was created on. If this check is done by an event handler outside the element Hammer was created on, the information may be incorrect.
For example, if I have the structure:
<my-custom-element>
#shadow-root
<span>Click here</span>
</my-custom-element>
If I create a Hammer instance on the span, I will not get "tap" events. I believe this is because Hammer must be capturing the events outside of my-custom-element so the events are already retargeted to my-custom-element and not the span.
In the old version of Hammer I was able to hack around this by modifying the file hammerjs/src/input.js at line 190 to read:
// find the correct target
var target = manager.element;
// if (hasParent(input.srcEvent.target, target)) {
// target = input.srcEvent.target;
// }
// MIKE FIX
var eventTarget = input.srcEvent.composedPath().length > 0 ?
input.srcEvent.composedPath()[0] : input.srcEvent.target;
if (hasParent(eventTarget, target)) {
target = eventTarget;
}
input.target = target;
That same code appears in compute-input-data.js at line 65 and has the same problem.
I'm not sure if the right fix is to use the composedPath as I did in my original hack or if Hammer should be listening for events directly on the element so it handles them inside the shadow-dom before event retargeting. I'm not familiar with Hammer enough to know why it would be listening outside the element it was constructed on.
I've attached a simple test case that was made from the Polymer3 starter. I added Hammer as a dependency and added a quick span you can click on. There are two lines where Hammer is constructed. The one targeting the "clickArea" will demonstrate the problem while the one targeting the top most element will work.
You can run "node install" and then use the polymer cli to run "polymer server" and see the issue.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4