[whatwg] Selectors within <style scoped>

[Ian Hickson]

On Wed, 15 Jun 2011, Roland Steiner wrote:
> 
> According to the HMTL5 spec, selectors are not limited to children of 
> the scoping element (the parent element of <style scoped>). For example:
> 
> <div class="foo">
>     <div>
>         <style scoped>
>             .foo p { display: none }
>         </style>
>         <p>To be or not to be, that is the question.</p>
>     </div>
> <div>
> 
> In above snippet, the selector in the scoped stylesheet would match, 
> causing the <p> element to be hidden. To me, this seems counterintuitive 
> - I originally would have the scoped stylesheet expected to be matched 
> starting from the scoping element (the 2nd <div> in above example) 
> downwards, and not cross the scope boundary.
> 
> As far as I can tell, the advantages of allowing the selector to cross 
> the boundary are:
> 
> 1.) less change to selection behavior
>
> 2.) allow the styling to change depending where the scoping element is 
> inserted within the document

It also allows a number of other use cases, e.g. having styles when the 
user is hovering over some ancestor of the section (:hover on ancestor), 
changing style when the page URL is targetting some ancestor of the 
section (:target on ancestor), distinguishing whether the section is 
embedded in <blockquote> or <article> and using different styles in those 
cases (e.g. using more of the source's branding if it's in <article> and 
letting more of the page style show through if it's in <blockquote>), 
coordination with the syndicator so that specific classes can be set up to 
allow the styles to automatically distinguish whether the section was 
embedded through user choice or through some seredipity algorithm, etc.



> The disadvantages:
> 
> 1.) a scoped style may unexpectedly apply, because an arbitrary ancestor of
> the scoping element happens to partially match the scoped selector
> 2.) have to be very careful with using simple HTML tags in scoped selectors,
> because of 1.)
> 3.) also because of 1.) have to be careful about recursive use of style
> scopes - either programmatically generated, or in the course of XBL.

XBL2 specifically gives the author control over this issue, because it is 
indeed a problem in a widget scoped style scenario. I don't think these 
disadvantages are likely to be common in the syndication use case, though: 
typically, the ancestors are going to be pretty tame (a bunch of <div>s, 
an <article>, maybe a <section>, probably little else).

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'