19897 2012-11-07 20:03:15 +0000 [Shadow]: Add Custom Pseudo-Elements example 2012-12-04 06:56:24 +0000 1 1 1 Unclassified WebAppsWG HISTORICAL - Component Model unspecified PC All RESOLVED FIXED P2 normal --- 18428 1 miket dglazkov sgrekhov public-webapps-bugzilla oldest_to_newest 78006 0 miket 2012-11-07 20:03:15 +0000 Section 5.10 Custom Pseudo-Elements could do with a code example to clarify how it all works. As an author, the mechanics aren't crystal clear--and there isn't any mention in the Explainer. Going with the example of the 2-dimensional range slider widget, is the following enough to actually create the custom pseudo-element for the slider thumb, called "x-slider-thumb"? var thumb = shadowRoot.getElementById('slider-thumb') thumb.pseudo = "x-slider-thumb" And then I can use it in my page's stylesheet like so, :x-slider-thumb {background-color: rgba(0,0,0,.75)} I might have it wrong, but a correct example would be helpful here. 78008 1 dglazkov 2012-11-07 20:50:47 +0000 Word. 79091 2 sgrekhov 2012-11-29 05:24:33 +0000 I vote for the example too. 79300 3 dglazkov 2012-12-03 16:46:18 +0000 http://dvcs.w3.org/hg/webcomponents/rev/76e968e547e9 79302 4 miket 2012-12-03 16:52:49 +0000 Great! 79379 5 sgrekhov 2012-12-04 06:56:24 +0000 Thank you! See also implementation issue https://bugs.webkit.org/show_bug.cgi?id=103973