W3C home > Mailing lists > Public > www-style@w3.org > March 2012

Re: <style scoped> and the cascade

From: Roland Steiner <rolandsteiner@chromium.org>
Date: Thu, 8 Mar 2012 15:25:56 +0900
Message-ID: <CACFPSpjSXx3W6LUAXpdJS4yi7=xenXDP_jT5T_0PEba3wXGo8Q@mail.gmail.com>
To: Boris Zbarsky <bzbarsky@mit.edu>, www-style@w3.org
On Thu, Mar 8, 2012 at 14:33, Boris Zbarsky <bzbarsky@mit.edu> wrote:

> On 3/7/12 11:45 PM, Roland Steiner wrote:
>
>> On Thu, Mar 8, 2012 at 08:50, Tab Atkins Jr. <jackalmage@gmail.com
>> <mailto:jackalmage@gmail.com>> wrote:
>>
>>    Everything you need should already be there - just add the concept of
>>    'scope' to the author origin, such that for any two scoped styles A
>>    and B, if B's scoping element is a descendant of A's scoping element,
>>    B's styles have a higher weight than A's styles. (If A and B don't
>>    have an ancestor/descendant relationship, the relative weighting is
>>    undefined, but they can't ever apply to the same elements anyway.
>>    Note: we should make sure this invariant remains true.)
>>
>>
>> FWIW, one case where this invariant may be violated is with XBL's
>> 'apply-binding-sheets'.
>>
>
> I think for the apply-binding-sheets case we should treat the relevant
> scoped stylesheets as having the bound element or the anonymous tree root
> as a parent (which would sort of match what they are scoped to).


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/>

In this case, both <style scoped> could be considered "siblings", both
hanging off the host <div> element, but both affecting the <pre>. IMHO -
and this may be what you're saying - this should be resolved by looking at
the final flattened tree:

<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 the text would be blue. 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).


- Roland
Received on Thursday, 8 March 2012 06:27:11 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 22 May 2012 03:48:51 GMT