Re: <style scoped> and the cascade

Boris Zbarsky, Wed, 07 Mar 2012 16:52:46 -0500:
> On 3/7/12 4:18 PM, Tab Atkins Jr. wrote:

>  <div>
>    <style id="a" scoped></style>
>    <p><style id="b" scoped></style></p>
>    <style id="c" scoped></style>
>  </div>

The last <style scope> is illegal. Quoting the spec:

]] must be the first node of flow content in its parent element other 
than inter-element whitespace, and the parent element's content model 
must not have a transparent component. [[

Shouldn't a <style scope> that occurs somewhere else, should be without 
effect? If not, why do we need these rules?

> For descendants of the <p>, I would think that the cascade order should be:
> 
>   1)  Global stylesheets
>   2)  Styles from "a" and "c" (sorted by specificity, etc)
>   3)  !important styles from "b"
>   4)  !important styles from "a" and "c" (sorted by specificity)
>   5)  !important global styles
> 
> Thoughts?

It gives the impression that it is very important to make use of 
'!important', in order to make use of <style scoped> ...

Which makes me wonder: What's the problem <style scope> is supposed to 
solve? Isn't the purpose to *override* the effect of the cascade? 

Examples: Imagine we have <foo-root> element as direct child of <body>. 
And imagine that we have a global <style> in the <head> with the 
following rule:

   body foo-root {background:red}

Simultaneously, inside a <style scoped> inside the <foo-root>, we have 
this rule:

   foo-root{background:lime}

Problem: In this case the global style would win. Which to me is 
backward. It is not true scoping. Instead, it is the same cascading 
mess.

To really make <style scoped> scoped, why not consider that the scoped 
selector above, is equivalent to the following, global selector, except 
that it - of course - would only apply to the specific <foo-root> 
element where <style scoped> occurs, and not to any other <foo-root> 
elements in the document:

   html body foo-root {background:lime}

As a result, the above rule in the <head>, would be equivalent to the 
following <style scoped> rule inside the <foo-root> element:

   foo-root {background:lime}

The latter rule above would win only because it occurs *after* the 
global rule in the <head> -  same as the following colors the p red, 
because the last rule says so:

   p{color:lime}
   p{color:red}

And also, all of the following rules would be equivalent - none of them 
would be more or less specific. 

   <style scoped>
   foo-root {background:red!important}
   </style>

   <style scoped>
   body foo-root {background:red!important}
   </style>

   <style scoped>
   html body foo-root {background:red!important}
   </style>
-- 
Leif Halvard Silli

Received on Thursday, 8 March 2012 00:58:47 UTC