Re: CSS + Shadow DOM = <3 + more

FWIW, I noticed that the model I proposed is not working because 
rule-matching implies recursive knowledge of the tree (because the ::host 
pseudo-element walk the layout tree in the reverse direction). I'm proposing 
here a simpler solution that doesn't have that problem, which only uses 
pseudo-classes:

    @global {

        /*
            selectors in this at-rule can target any element,
            not only the elements of the current tree
        */

        :root { /* the root of the document */ }
        :tree-root { /* the root the current tree */ }

        :host { /* the host of current shadow DOM tree */ }
        :host-tree-root { /* the root of the tree containing :host */ }

        /*
            the '=>' and '==>' combinators works as decribed before
        */

    }

This is also closer of the spirit of your current @host syntax.




-----Message d'origine----- 
From: Dimitri Glazkov
Sent: Saturday, June 16, 2012 5:44 PM
To: François REMY
Cc: www-style@w3.org ; Roland Steiner
Subject: Re: CSS + Shadow DOM = <3 + more

On Sat, Jun 16, 2012 at 6:35 AM, François REMY
<fremycompany_pub@yahoo.fr> wrote:
> 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.

-- great example skipped for brevity --

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

You're exactly right. I outlined a similar concern here:
https://www.w3.org/Bugs/Public/show_bug.cgi?id=16519#c6

However, my feeling is that this should not be solved with @host. The
purpose of @host is to provide some styling of the host element by the
shadow DOM subtree, and that's it. The patterns where a subtree reacts
to document's DOM changes are explicitly not handled.

Which reminds me -- what does the @host do when the tree is itself
assigned into a shadow insertion point? Filed
https://www.w3.org/Bugs/Public/show_bug.cgi?id=17515 to investigate.

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

This is interesting! Filed a bug
https://www.w3.org/Bugs/Public/show_bug.cgi?id=17516 as a starting
point.

:DG<

Received on Wednesday, 20 June 2012 15:37:08 UTC