Re: CSS + Shadow DOM = <3 + more

Just a thought: since you can have multiple nested levels of shadow trees, 
you may experience problems (with an @host at-rule) in getting the 'root' 
level (where html & body lives) or the 'n-2' level.

    document's tree:
        html
            body
                ctrl1
                    div#box1

    ctlr1's shadow tree:
        :root
            div#insertionPoint
            ctrl2

    ctlr2's shadow dom:
        :root
            input
            style ---> for examples

If you want to control ctlr2's input styling based on document's <body> 
classes (Modernizr...) you can't use @host as you defined it.

There are probably numerous ways to soleve this problem, here's the one I 
thought of: adding the "::host()" and "::host-root()" pseudo-elements that 
only the ":root" elements of a shadow trees have and which refers to their 
host.

Some notes:
    - By 'layout tree' I mean the 'tree has rendered'.
    - I use '=>' as the "direct child in the layout tree" combinator, and 
'==>' as the "descendant in the layout tree" combinator.

Examples using that proposal (content of the style tag of ctrl2's shadow 
tree):

    * {
        matches every node of the <ctrl2>'s shadow tree (<:root>, <input>, 
<style>)
    }

    ::host {
        // matches the <ctrl2> tag, in <ctrl1>'s shadow tree
        // identical to ":root::host" because <:root> is the only selectable 
element by "*" which has the "::host" pseudo-element
    }

    ::host:hover {
        // matches the <ctrl2> tag, if the mouse pointer is over it
    }

    ::host:matches(div, span) {
        // doesn't match anything, the host element is a <ctrl2> tag
    }

    ::host-root {
        // matches the <:root> of the <ctrl1>'s shadow tree
        // identical to ":root::host-root" because <:root> is the only 
selectable element which has the "::host" pseudo-element
    }

    ::host-root > div {
        // matches <div#insertionPoint> in <ctrl1>'s shadow tree
    }

    ::host-root > div => * {
        // matches <div#box1> because it is a direct child, in the layout 
tree, of <div#insertionPoint> (which matches the "::host-root > div" 
selector)
    }

    body ==> :root input {
        // matches <ctlr2>'s shadow tree's <input>, because it is a 
descendant, in the layout tree, of the <body> tag (which matches the "body" 
selector)
    }

    ::host ==> * {
        // matches the <:root>, <input> and <style> tags of <ctrl2>'s shadow 
tree, because they are descendants; in the layout tree, of the <ctrl2> tag 
(which matches ::host)
    }

    ::host => *::host {
        // creepy example, that also matches the <ctrl2>'s tag because 
"::host => *" matches the <:root> element of the <ctrl2>'s shadow tree, 
which as a "::host" pseudo-element which is <ctrl2>
        // identical to "::host => *::host => *::host" for the same reason
    }

I think you can make select any element you want accross the branches of the 
shadow trees with those four additions to CSS. But this is just an idea, 
maybe there are other ways to achieve this which are more intuitive.




-----Message d'origine----- 
From: Dimitri Glazkov
Sent: Friday, June 15, 2012 11:17 PM
To: www-style@w3.org
Cc: Roland Steiner
Subject: Re: CSS + Shadow DOM = <3 + more

Following thoughtful analysis by Roland on
https://www.w3.org/Bugs/Public/show_bug.cgi?id=16519, I went ahead and
killed :host pseudo-class in favor of the @host @-rule:

http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#host-at-rule

:DG<

Received on Saturday, 16 June 2012 13:36:24 UTC