Bug 103973
| Summary: | [Shadow DOM]: custom pseudo-element styles are not applied to the shadow tree elements | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Sergey G. Grekhov <sgrekhov> |
| Component: | DOM | Assignee: | Web Components Team <webcomponents-bugzilla> |
| Status: | RESOLVED WONTFIX | ||
| Severity: | Normal | CC: | dglazkov, miket, morrita, shinyak, tasak, webcomponents-bugzilla |
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| Bug Depends on: | |||
| Bug Blocks: | 63606, 103230 | ||
Sergey G. Grekhov
Found in Chrome 23.0.1271.95 m. Custom pseudo-elements styles (https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#custom-pseudo-elements) are not applied to the shadow tree elements. Run the following example:
<html>
<head>
<script type="text/javascript">
function test() {
var SR = window.ShadowRoot || window.WebKitShadowRoot;
var d = document;
var widget = d.createElement('div');
d.body.appendChild(widget);
var s = new SR(widget);
var thumb = d.createElement('span');
thumb.innerHTML = 'Some text';
thumb.pseudo = 'x-thumb';
s.appendChild(thumb);
var style = d.createElement('style');
style.innerHTML = 'span::x-thumb {' +
'color:red;' +
'}';
s.appendChild(style);
}
</script>
</head>
<body onload="test()">
</body>
</html>
As you can see red color style is not applied. If is ShadowRoot style replace span::x-thumb by span then style is applied. So problem is in custom pseudo-element
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Shinya Kawanaka
This test seems to contain several bugs.
1. style element should be in document instead of shadow tree.
2. selector should be div::x-thumb. (you should specify host element before ::.)
Also, now we're using prefixed version of API, i.e. webkitPseudo.
Please see this. This should work in Chrome Canary.
http://jsfiddle.net/yRb68/2/
Sergey G. Grekhov
Thank you for the clarification. Code from http://jsfiddle.net/yRb68/2/ really works in Canary. But webkitPseudo property is set in the example.
thumb.webkitPseudo = 'x-thumb';
According the example from Shadow DOM spec (see https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#custom-pseudo-elements) thumb.pseudo property should work but doesn't in the Canary
Sergey G. Grekhov
Ups.. missed that you are using prefixed version of the API. Sorry.
Dimitri Glazkov (Google)
Yay!