103973 2012-12-03 22:54:58 -0800 [Shadow DOM]: custom pseudo-element styles are not applied to the shadow tree elements 2012-12-14 10:22:26 -0800 1 1 1 Unclassified WebKit DOM 528+ (Nightly build) Unspecified Unspecified RESOLVED WONTFIX P2 Normal --- 63606 103230 0 sgrekhov webcomponents-bugzilla dglazkov miket morrita shinyak tasak webcomponents-bugzilla oldest_to_newest 782236 0 sgrekhov 2012-12-03 22:54:58 -0800 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 791407 1 shinyak 2012-12-14 00:20:03 -0800 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/ 791454 2 sgrekhov 2012-12-14 01:23:57 -0800 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 791459 3 sgrekhov 2012-12-14 01:25:40 -0800 Ups.. missed that you are using prefixed version of the API. Sorry. 791688 4 dglazkov 2012-12-14 10:22:26 -0800 Yay!