102791 2012-11-20 04:06:08 -0800 [Shadow DOM]: Error in retargeting algorithm 2013-01-10 02:32:08 -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 771730 0 sgrekhov 2012-11-20 04:06:08 -0800 According to the https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#event-retargeting-example for #player related target should be #player. But it isn't so in Chrome 23.0.1271.64 m. Run the following example: <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">' + '<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 #player relative target is #player d.querySelector('#player').addEventListener('click', function (event) { alert('Relative target is ' + event.target.getAttribute('id')); }, false); var event = d.createEvent('HTMLEvents'); event.initEvent ("click", true, false); roots.playerShadowRoot.querySelector('#volume-slider').dispatchEvent(event); } </script> </head> <body onload="test()"> </body> </html> This example shows relative target as #player-shadow-root but according to the https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#event-retargeting-example relative target should be #player 804198 1 hayato 2013-01-10 02:32:08 -0800 The example in #1 is wrong. #player-shadow-root should be a ShadowRoot, but #player-shadow-root in the example seems to be a shadow host.