Capture Event Phase unexpected results with Shadow DOM
Reported by
m.strame...@gmail.com,
Jul 8 2017
|
||||
Issue descriptionUserAgent: Mozilla/5.0 (Linux; Android 8.0.0; Pixel XL Build/OPP3.170518.006) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.125 Mobile Safari/537.36 Steps to reproduce the problem: Here are 3 JsFiddles that show the confusion... Standard DOM: http://jsfiddle.net/stramel/joqqf2qz/2/ (Fires as expected) Shadow DOM (Nested): http://jsfiddle.net/stramel/4pn4x4j1/ (Fires reverse expected) Shadow DOM (Slotted): http://jsfiddle.net/stramel/03fum0gc/ (Fires as expected) What is the expected behavior? Parent Capture listener should fire before the child capture listener What went wrong? Child fires before the parent when using nested elements and Shadow dom Did this work before? N/A Does this work in other browsers? No Using the `useCapture` event listener on a child and parent in conjunction with Shadow DOM causes the child to fire before the parent. Chrome version: 59.0.3071.125 Channel: stable OS Version: 4.4.6 Flash Version: Appears to also be an issue in Safari
,
Jul 11 2017
,
Oct 27 2017
,
Oct 27 2017
Thank you for reporting. This is not a bug. This is an expected behavior, as per the spec. [1] At either <parent-example> or <child-example>, we set event.eventPhase to *TARGET* for their registered event listeners. There is no capturing phase for them. That is one of the special treatment to honer Shadow DOM encapsulation. Even if <button> element in the shadow root is clicked, we let users see as if a shadow host (<child-example> or <parent-example> in this example) was clicked, instead of the element in the shadow root. So, we set event.eventPhase to *TARGET* for a shadow host, basically. Since TARGET phase trigger all event listeners, regardless useCapture is true or not, we call all event listeners from bottom to top. [1] https://dom.spec.whatwg.org/#dispatching-events
,
Oct 27 2017
In other words, <parent-example> (or <child-example>) is a *leaf* node, in each node tree, in http://jsfiddle.net/4pn4x4j1/5/. Thus, TARGET phase is used for them. |
||||
►
Sign in to add a comment |
||||
Comment 1 by emarquez@chromium.org
, Jul 8 2017