Bug 102788
| Summary: | [Shadow DOM]: 'Click' event stops on shadow boundary | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Sergey G. Grekhov <sgrekhov> |
| Component: | DOM | Assignee: | Web Components Team <webcomponents-bugzilla> |
| Status: | RESOLVED INVALID | ||
| Severity: | Normal | CC: | dominicc, hayato, morrita, shinyak, webcomponents-bugzilla |
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| Bug Depends on: | |||
| Bug Blocks: | 103230 | ||
Sergey G. Grekhov
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
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
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.