[Bug 19897] New: [Templates]: Custom Pseudo-Elements example

https://www.w3.org/Bugs/Public/show_bug.cgi?id=19897

          Priority: P2
            Bug ID: 19897
          Assignee: dglazkov@chromium.org
            Blocks: 15476
           Summary: [Templates]: Custom Pseudo-Elements example
        QA Contact: public-webapps-bugzilla@w3.org
          Severity: normal
    Classification: Unclassified
                OS: All
          Reporter: miket@opera.com
          Hardware: PC
            Status: NEW
           Version: unspecified
         Component: Component Model
           Product: WebAppsWG

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.

-- 
You are receiving this mail because:
You are the QA Contact for the bug.

Received on Wednesday, 7 November 2012 20:03:17 UTC