Re: Opera's Proposal for :context Selector

Tab Atkins Jr. wrote:
> Grr, misused the tab key.  Continuing message...
>
>
>
>  On Mon, Jul 14, 2008 at 2:50 PM, Andrew Fedoniouk
> <news@terrainformatica.com> wrote:
>   
>> Thanks for your answers, your intention is more clear now but see below...
>>
>> Lachlan Hunt wrote:
>>
>>     
>>> As a proof of concept, consider this example:
>>>
>>> <body class="foo">
>>>  <section>
>>>    <style scoped>
>>>    .foo h1 { color: green; }
>>>    .bar h1 { color: blue; }
>>>    </style>
>>>    <h1>Example</h1>
>>>    <p>Hello world!</p>
>>>  </section>
>>> </body>
>>> This allows styles to be changed dynamically by changing the class name on the body element from "foo" to bar", which would change the heading from green to blue.
>>>       
>> You already can do that. Simply write:
>>
>>  body.foo h1 { color: green; }
>>  body.bar h1 { color: blue; }
>>
>> and it will work for you already. Why do you need <style scoped> then?
>>     
>
>  The two work quite a bit differently.  Your selectors will match (and
> change the color of) *all* <h1>s in body.foo or body.bar.  The scoped
> stylesheet *only* changes those <h1>s that appear within the <style>'s
> scope.  <h1>s that appear elsewhere will not be affected, even though
> they may match a naive application of the selector.
>
> The same applies to the querySelector, but you already get that (you
> said exactly what is meant - that it's a global selector but against a
> limited set of elements).  The two are meant to work the same.
>   
Ok.

To achieve reliable results you always have to put full path in selectors:

<body>
    <div id="scope">
      <style scoped>
         .foo #scope h1 { color: green; }
         .bar #scope h1 { color: blue; }
     </style>
     <div class="foo">
       <h1>header</h1>
    </div>
  </div>
</body>

even in scoped style sheets.

So why do you need that word "scoped" in the <style>?

Construction above will work without scoped too:

<body>
    <div id="scope">
      <style>
         .foo #scope h1 { color: green; }
         .bar #scope h1 { color: blue; }
     </style>
     <div class="foo">
       <h1>header</h1>
    </div>
  </div>
</body>

Will lead to exactly the same results. So why? What prevents you from 
using that way scoped style sheets now?

>   
>> As far as I understand intention is to have:
>>  <style scoped src="style-system-for-my-component.css" />
>> and to be able to use that style-system-for-my-component.css in various places/pages?
>> Modularity implies that declarations in style-system-for-my-component.css are
>> independent from the position of scope/root element on the page - rooted to the element
>> this style set is applied to. So you could share your libraries/components.
>> Too bad if this is not the intent.
>>     
>
> I agree here, though, that *without* a :scope or :context pseudoclass,
> it can be difficult to achieve proper modularity.  Frex, in this
> fragment:
>
> <section>
>   <style scoped>
>     div span { color: red }
>   </style>
>   <span>span content</span>
>   <div>
>     <span>some more span content</span>
>   </div>
> </section>
>
> The second span will definitely be red, but the first will be red
> depending on whether or not there is a div somewhere further up the
> ancestor chain.
>
> In other words, I *really like* having querySelector and scoped
> <style>s do a global match (but only apply to a limited set of
> elements), but one needs, I think, a way to specify that you *really*
> want a section of the selector to *only* apply to the scoped area.
> Allowing :scope/:context would do wonders here, as well as make it
> easy to define the stricter forms of scoped matching that Andrew likes
> - as written earlier in the thread, the stricter forms would just
> auto-prepend :scope/:context to the passed selector.
>   
auto-prepended :scope/:context simply means that you work on isolated 
sub-tree.
So you have your :root element resolved to the element establishing the 
scope.
So that was the initial question: why to have artificial and 
contradictory :scope/:context
if you already have :root element?

Received on Monday, 14 July 2008 21:19:26 UTC