[whatwg] Selectors within <style scoped>

[Roland Steiner]

On Thu, Sep 15, 2011 at 9:55 AM, Ian Hickson <ian at hixie.ch> wrote:

> [...]

However, as easy as that appears at first blush, I fear it would be seem
> quite magical to authors who have trouble enough understanding CSS as it
> is. Consider:
>
>   <aside>
>    <section>
>     <style scoped>
>      aside section h1 { ... } /* matches nothing */
>      aside section:scope h1 { ... } /* matches h1 below */
>     </style>
>     <h1>Example</h1>
>     ...
>    </section>
>   </aside>
>
> Never before in CSS has making a selector more specific actually increased
> the number of elements it can match.


That is a very good point!


With :root doing the magic, you're really using :root as an @-rule; you
> might as well at that point actually do so:
>
>     <style scoped>
>      section > h1 { border-bottom: solid; }
>      @global body.homepage h1 { color: red; }
>      @global body.archive h1 { color: gray; }
>     </style>
>
> This does have the advantage of meaning there's no magic. Where do
> implementors stand on this? Are @rules an acceptable solution? (If so,
> we'd want to pass it by the CSSWG first.)
>

On first glance (without having looked at code and potential interactions of
@-rules) "@global" really seems much nicer, esp. for the above given reason.
It's also visually easier to parse, IMHO.

It would also make a nice parallel with the proposed queryScopedSelector
when explaining all of this to authors: @global -> querySelector, no @global
-> queryScopedSelector.


- Roland