Re: Opera's Proposal for :context Selector

Thanks for your answers, your intention is more clear now but see below...

Lachlan Hunt wrote:

>
> Andrew Fedoniouk wrote:
>> Could you give clear answers to following questions:
>>
>> For the markup:
>>  <body>
>>    <div>
>>        <p id="scope"><span>FOO</span></p>
>>    <div>
>>  </body>
>>
>> and code:
>>
>>  var scope = document.getElementById("scope");
>>  var test1 = scope.querySelector("div span");
>>  var test2 = jQuery.find("div span");
>>
>> 1) What is expected value of test1? null or reference to the span 
>> element?
>
> Span element.
Ok. That means that you use non-isolated (global) lookups but on limited 
set of elements.
That is different from what jQuery uses. It behaves as if all parents 
above the scope element
simply do not exist. So the scoped element is the :root of that sub-tree 
- tree made of pruned branch.

Your approach imply that if the same scope element will appear in 
different places of the global tree
then the following test:
   var test1 = scope.querySelector("div span");
may or may not return null. Depends on position of Saturn in the sky at 
the moment of writing.

Honestly, practical purpose of such a function is unknown to me.

>
>> 2) Do you expect results in test1 and test2 to be different?
>
> Yes.  This is one reason why :context is being introduced.  But there 
> is a possibility that a new queryScopedSelector() method may be 
> introduced in the future, which automatically prepends :context to the 
> beginning of each selector and allows for the JQuery shorthand 
> syntaxes like ">strong,>em" to be pre-processed into valid selectors.  
> That will more accurately match the behaviour of JQuery and other 
> libraries.
Aha, so that queryScopedSelector() will be the real one. Ok.

So queryScopedSelector() is the function where :root and :context will 
be mutually exclusive.
With, again, one obvious exception -  
document.root.queryScopedSelector(...);

>
>> 3) If you have scoped style sheet applied to <p id="scope"> in some 
>> form then what would be a result of applying following style sheet:
>>
>> /*style set for the p#scope */
>> <style root="p#scope">
>>  span { color:green; }
>>  div span { color:red; }
>> </style>
>>
>> What would be the color of text FOO?
>
> Assuming I interpret your scoped stylesheet syntax correctly, which 
> differs from the HTML5 syntax, then it would be red.
>
> It has to work like that. 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>
What about modularity? Say your <section> with the same content will
appear in different places of two different documents.
In this case you will need to write two different style sets.
Is this the goal? If "yes" then what is the great idea of  <style scoped>?
That is not a rhetorical question.
>
> 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?

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.

--
Andrew Fedoniouk.

http://terrainformatica.com

Received on Monday, 14 July 2008 19:51:19 UTC