- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Mon, 14 Jul 2008 15:34:57 -0500
- To: "Andrew Fedoniouk" <news@terrainformatica.com>
- Cc: "Lachlan Hunt" <lachlan.hunt@lachy.id.au>, www-style <www-style@w3.org>
- Message-ID: <dd0fbad0807141334x312cf89ai76e1a7f31a71b8e2@mail.gmail.com>
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:
>
>
>
>> 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?
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.
> 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>
<span>span content</span>
<div>
<span>some more span content</span>
</div>
</section>
Received on Monday, 14 July 2008 20:35:39 UTC