RESOLVED INVALID 102788
[Shadow DOM]: 'Click' event stops on shadow boundary 
https://bugs.webkit.org/show_bug.cgi?id=102788
Summary [Shadow DOM]: 'Click' event stops on shadow boundary
Sergey G. Grekhov
Reported 2012-11-20 03:10:38 PST
Found in Chrome 23.0.1271.64 m Run the example of event retargeting taken from https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#event-retargeting-example. The code is the following: <html> <head> <script type="text/javascript"> //Example taken from http://www.w3.org/TR/shadow-dom/#event-retargeting-example function createTestMediaPlayer(d) { var SR = window.ShadowRoot || window.WebKitShadowRoot; d.body.innerHTML = '' + '<div id="player">' + '<input type="checkbox" id="outside-control">' + '<div id="player-shadow-root">' + '</div>' + '</div>'; var playerShadowRoot = new SR(d.querySelector('#player-shadow-root')); playerShadowRoot.innerHTML = '' + '<div id="controls">' + '<button class="play-button">PLAY</button>' + '<input type="range" id="timeline">' + '<div id="timeline-shadow-root">' + '</div>' + '</input>' + '<div class="volume-slider-container" id="volume-slider-container">' + '<input type="range" class="volume-slider" id="volume-slider">' + '<div id="volume-shadow-root">' + '</div>' + '</input>' + '</div>' + '</div>'; var timeLineShadowRoot = new SR(playerShadowRoot.querySelector('#timeline-shadow-root')); timeLineShadowRoot.innerHTML = '<div class="slider-thumb" id="timeline-slider-thumb"></div>'; var volumeShadowRoot = new SR(playerShadowRoot.querySelector('#volume-shadow-root')); volumeShadowRoot.innerHTML = '<div class="slider-thumb" id="volume-slider-thumb"></div>'; return { 'playerShadowRoot': playerShadowRoot, 'timeLineShadowRoot': timeLineShadowRoot, 'volumeShadowRoot': volumeShadowRoot }; } function test() { var d = document; roots = createTestMediaPlayer(d); //For #volume-slider-thumb relative target is #volume-slider-thumb roots.volumeShadowRoot.querySelector('#volume-slider-thumb').addEventListener('click', function (event) { alert('Point 1: relative target is ' + event.target.getAttribute('id')); }, false); //For #volume-slider-thumb relative target is #volume-slider-thumb roots.volumeShadowRoot.addEventListener('click', function (event) { alert('Point 2: relative target is ' + event.target.getAttribute('id')); }, false); //For #volume-slider-thumb relative target is #volume-slider-thumb roots.playerShadowRoot.querySelector('#volume-slider').addEventListener('click', function (event) { alert('Point 3: relative target is ' + event.target.getAttribute('id')); }, false); var event = d.createEvent('HTMLEvents'); event.initEvent ("click", true, false); roots.volumeShadowRoot.querySelector('#volume-slider-thumb').dispatchEvent(event); } </script> </head> <body onload="test()"> </body> </html> At the points 1 and 2 this example shows correct related target. On point 3 event listener is not invoked that means that event was stopped on the shadow boundary but should not.
Attachments
Add attachment proposed patch, testcase, etc.
Sergey G. Grekhov
Comment 1 2012-11-22 06:33:12 PST
Additional investigation showed that event is not stopped but bubbles. But it's strange why event listener is not invoked in the example shown in description.
Hayato Ito
Comment 2 2013-01-10 02:41:36 PST
Marking INVALID since the example used in #1 is wrong. #player-shadow-root should be a ShadowRoot, but that in example is actually a Shadow Host.
Note You need to log in before you can comment on or make changes to this bug.