102788 2012-11-20 03:10:38 -0800 [Shadow DOM]: 'Click' event stops on shadow boundary 2013-01-10 02:41:36 -0800 1 1 1 Unclassified WebKit DOM 528+ (Nightly build) Unspecified Unspecified RESOLVED INVALID P2 Normal --- 103230 0 sgrekhov webcomponents-bugzilla dominicc hayato morrita shinyak webcomponents-bugzilla oldest_to_newest 771708 0 sgrekhov 2012-11-20 03:10:38 -0800 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. 773904 1 sgrekhov 2012-11-22 06:33:12 -0800 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. 804205 2 hayato 2013-01-10 02:41:36 -0800 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.