Please run the following example in Chrome (my Chrome 23.0.1271.64 m): <html> <head> <script type="text/javascript"> function test() { var d = document; var SR = window.ShadowRoot || window.WebKitShadowRoot; //Shadow root to play with var s = new SR(d.querySelector('#host')); var div1 = d.createElement('div'); div1.setAttribute('style', 'height:100%; width:100%'); div1.setAttribute('id', 'div1'); s.appendChild(div1); var div2 = d.createElement('div'); div2.setAttribute('style', 'height:100%; width:100%'); div2.setAttribute('id', 'div2'); d.body.appendChild(div2); d.body.addEventListener('mouseover', function(event) { alert('event.relatedTarget.id=' + event.relatedTarget.getAttribute('id')); }, false); var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("mouseover", true, false, window, 0, 10, 10, 10, 10, false, false, false, false, 0, div1); div2.dispatchEvent(evt); } </script> </head> <body onload="test()"> <div id="host"> </div> </body> </html> As you can see related target is "div1" but according http://www.w3.org/TR/shadow-dom/#retargeting-related-target expected relatedTarget is "host"
I've confirmed that http://trac.webkit.org/changeset/136818 fixed this. Closing.