Re: Feedback and questions on shadow DOM and web components

On Tue, Nov 13, 2012 at 7:48 PM, Angelina Fabbro
<angelinafabbro@gmail.com> 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<

Received on Wednesday, 14 November 2012 04:54:41 UTC