Bug 103973 - [Shadow DOM]: custom pseudo-element styles are not applied to the shadow tree elements
Summary: [Shadow DOM]: custom pseudo-element styles are not applied to the shadow tree...
Status: RESOLVED WONTFIX
Alias: None
Product: WebKit
Classification: Unclassified
Component: DOM (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Web Components Team
URL:
Keywords:
Depends on:
Blocks: 63606 103230
  Show dependency tree / graph
 
Reported: 2012-12-03 22:54 PST by Sergey G. Grekhov
Modified: 2012-12-14 10:22 PST (History)
6 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Sergey G. Grekhov 2012-12-03 22:54:58 PST 
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
Comment 1 Shinya Kawanaka 2012-12-14 00:20:03 PST 
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/
Comment 2 Sergey G. Grekhov 2012-12-14 01:23:57 PST 
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
Comment 3 Sergey G. Grekhov 2012-12-14 01:25:40 PST 
Ups.. missed that you are using prefixed version of the API. Sorry.
Comment 4 Dimitri Glazkov (Google) 2012-12-14 10:22:26 PST 
Yay!