Re: <style scoped> and the cascade

On Thu, Apr 26, 2012 at 3:06 AM, Daniel Brockman
<daniel@gointeractive.se> wrote:
> I found this thread after searching for "<style scoped>",
> because I am playing with it in Google Chrome and the
> results I was getting seemed to be surprising, and wrong.
>
> So it turns out I got bit by this too.  It seems very unintuitive
> for a simple scoped selector to be overridden by a simple
> global selector for the same element.  Made me think I
> either wasn't understanding the purpose of <style scoped>,
> or there must be a bug in Chrome.
>
> To make matters worse, I also don't see any easy way of
> increasing the specificity of the local rule short of introducing
> some kind of wrapper class/ID (or liberal use of "!important").
>
> And this is for the simplest use case you can think of:
>
> <link href="normalize.css" rel="stylesheet">
> …
> <section>
>  <style scoped>
>    h1 { margin-top: 0 } /* doesn't work */
>  </style>
>  <h1>foo</h1>
> </section>
>
> So consider this another up vote for the proposed solution,
> which sounds logical to me, and is in fact how I expected it
> to work in the first place.

Sorry for the late reply! I just now noticed that I had a few
unread-but-archived emails in this list.  Dunno how that happened.

Anyway, the answer is that fantasai and I will pick up the Cascade
module later this year and define how scoped styles interact in the
cascade.

Scoped rules should automatically win against unscoped rules, and all
rules scoped to elements higher in the document tree.

I don't think Chrome currently implements this behavior.

~TJ

Received on Tuesday, 15 May 2012 00:45:55 UTC