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.