Re: <style scoped> and the cascade

On 3/8/12 1:25 AM, Roland Steiner wrote:
> Just to clarify, I mean this case:
>
> <div class="bound">
> <style scoped>
>      pre  { color: green; }
> </style>
> <pre> Text </pre>
> </div>
>
> where the <div> is bound to:
>
> #ShadowRoot
> <style scoped>
>      pre { color: blue; }
> </style scoped>
> <content apply-binding-sheets/>

I think the simplest way to think of this case is that for each element, 
we walk up the parent chain in the flattened to collect the scoped 
stylesheets (those being the scoped sheets whose parents in the DOM, not 
in the flattened tree, are on the element's flattened tree parent 
chain).  Every time you walk up on node on the parent chain, that's a 
different cascade level.

> <div class="bound">
> <style scoped>
>          pre  { color: green; }
> </style>
>      #ShadowRoot
> <style scoped>
>      pre { color: blue; }
> </style scoped>
> <content apply-binding-sheets>
> <pre> Text </pre>

So in this case the <pre> has the following ancestors in the flattened tree:

   <content>
   #ShadowRoot
   <div class="bound">

The second and third of these have associated scoped stylesheets, and 
those are in different cascade levels, with the one on #ShadowRoot 
having higher precedence.

> So the text would be blue.

Yes, agreed.

> The caveat here being that <style> elements
> need to be considered exempt from being "captured" by <content> elements
> - i.e., not moved in the final flattened tree (not having a renderer,
> that may go without saying).

That depends on whether there are exposed APIs for traversing the 
flattened tree.  I would expect <style> elements to be "captured" like 
everything else, honestly.  My proposed algorithm above has the same 
effect as them not being captured; you just have to be careful about 
when you're using the DOM and when you're using the flattened tree.

-Boris

Received on Thursday, 8 March 2012 06:34:35 UTC