Style content in a shadow DOM subtree

Style content in a shadow DOM subtree. This spec (http://w3c.github.io/webcomponents/explainer/) indicates that one of the two ways to permit the page to style content in a shadow DOM subtree in a controlled way is by exposing a specific element assigning it a pseudo ID. Author styles can then refer to it as a pseudo-element. I could not find anything in Polymer's docs about this. Is that not supported in their polyfill?

@banguero, custom pseudo elements are gone from the spec -- they've been replaced with ::shadow and /deep/. Filed explainer bug for this.

For complicated components like the Pivot where you might want to style certain aspects of the control (e.g. the margins of the surface) is it really the case that the proposal is that you have to teach consumers of the Pivot component to use ::shadow and/or /deep/? While I understand the utility of the piercing selectors there feels to be an issue if you have to teach people to use them on a regular basis.

@spankyj, yup. I've been bunching these use cases under the big tent of "theming" and trying to understand how people would use it.

Our first foray into this (which was the introduction of custom pseudo elements) taught us that this is a slightly more complex problem than we anticipated (http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0454.html, see the part::) discussion.

But we're not giving up :smiley: In the latest informal survey we did, theming came up as the number one item to work on. So if you have any ideas, I would be happy to hear them.

At this point, the spec world lay of the land is like this:

• Use local style blocks for component styling
• Use (not yet implemented) CSS custom properties for theming
• Use piercing selectors otherwise

In Polymer-land, they actually a hand-rolled theming thing cooking. I think? (right, @sorvell?)