[whatwg] Selectors within <style scoped>

Dimitri Glazkov dglazkov at chromium.org
Wed Jun 15 09:30:44 PDT 2011

On Tue, Jun 14, 2011 at 11:50 PM, Ian Hickson <ian at hixie.ch> wrote:
> 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.

That's http://dev.w3.org/2006/xbl2/Overview.html#allow-selectors-through, right?

>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.   `._.-(,_..'--(,_..'`-.;.'

More information about the whatwg mailing list