[Bug 19684] New: [Shadow]: shadow reference combinator should be css function.

https://www.w3.org/Bugs/Public/show_bug.cgi?id=19684

          Priority: P2
            Bug ID: 19684
          Assignee: dglazkov@chromium.org
           Summary: [Shadow]: shadow reference combinator should be css
                    function.
        QA Contact: public-webapps-bugzilla@w3.org
          Severity: normal
    Classification: Unclassified
                OS: All
          Reporter: tasak@google.com
          Hardware: PC
            Status: NEW
           Version: unspecified
         Component: Component Model
           Product: WebAppsWG

I think, /select/ is a little confusing for web developers. It would be better
to use css function instead, e.g.
- distributed-into(), or
- selected-by()

I will write the reason why I suggest css function.
Current shadow dom spec says, 

- The combinator value must be select
- The first compound selector of the combinator must match an insertion point
- The second compound selector must match an element, distributed to this
insertion point

Its example is .some-insertion-point /select/ div.special.

However, any element can have "select". For example, users can write '<div 
class="some-insertion-point" select="...">'.

So it is difficult to know whether /select/ is just reference combinator or
shadow reference combinator.

For example,
<div class="shadow-host">
   <#shadow-root>
      <style>
      .some-insertion-point /select/ div.special { color: red; }
      </style>
      <div class=".some-insertion-point" select="#B">
      <content class=".some-insertion-point">
      <div id="B">This text is red?</div>
   </#shadow-root>
   <div class="special">This text should be red!</div>
</div>

The ".some-insertion-point /select/ div.special { color: red; }" should be
applied to distributed node or just div in shadow dom subtree? Both?

The most difficult thing is that we cannot decide whether
".some-insertion-point" points really insertion points or not when parsing the
rule.

So by using css function, we can write:
- div.special:distributed-into('.some-insertion-point') { color: red; }, or
- div.special:selected-by('.some-insertion-point') { color: red; }

This is very easy to know that the style should be applied to distributed
nodes.

What do you think about this?

-- 
You are receiving this mail because:
You are the QA Contact for the bug.