On Tue, Nov 13, 2012 at 7:48 PM, Angelina Fabbro <[email protected]> wrote: > I was having an exchange with a gentleman named Tom Ashworth that made it's > way off list. > > What he had said to me in a previous message about @host: > > "@host { } is weird. As far as I can tell, nothing inside it will be applied > unless the matched element is the shadow host. The spec says 'must only be > matched against the shadow host of the shadow DOM subtree in which the style > is specified', and this seems to be how things act in Chrome: changing your > example to @host { ul { background: red; } } works, presumably because it > matches the host. I've tried using a class, id and even a crazy attribute > selector (*[is="news"]) and they all work, but no other rules do."
To style shadow host children, you need the /select/ reference combinator (http://www.w3.org/TR/shadow-dom/#selecting-nodes-distributed-to-insertion-points). This gives you even more flexibility that @host { ul li { .. } } would, because you can have different rules match depending on which insertion point the child was distributed into. We are actively working on /select/ reference combinator support in WebKit. It kinda/sorta requires a major rethink of how style matching works, so it's a long slog. Watch this bug for updates: https://bugs.webkit.org/show_bug.cgi?id=82169 :DG<
