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

Re: CSS + Shadow DOM = <3 + more

From: François REMY <fremycompany_pub@yahoo.fr>
Date: Sat, 16 Jun 2012 15:35:58 +0200
Message-ID: <25A14C07419A495CBFE4EED2567E2C15@FREMYD2>
To: "Dimitri Glazkov" <dglazkov@google.com>, <www-style@w3.org>
Cc: "Roland Steiner" <rolandsteiner@google.com>
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:

    ctlr1's shadow tree:

    ctlr2's shadow dom:
            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 

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 

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

    ::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" 

    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" 

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


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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:00 UTC