Re: [css-selectors] Selecting non-element nodes

On Thu, Jul 25, 2013 at 10:40 PM, Simon Sapin <simon.sapin@exyr.org> wrote:
> Le 25/07/2013 19:13, François REMY a écrit :
>> Use cases include:
>>
>> - flowing text nodes into a css-region-flow while keeping some siblings
>> out of the flow
>>
>>      .to-flow-into> *:node-type(all) { flow-into: x }
>>      .to-flow-into> .not-in-flow { flow-into: none }
>>
>> - hiding text-nodes as part of the continuing content of a document
>>
>>      .read-more ~ *:node-type(all) {display:none})
>>
>> - coloring them without affecting the other elements inherited color value
>>
>>      .local-blue> *:node-type(text) { color: blue }
>
>
> I’m not super convinced. It seems that these examples would be used between
> "block-level" siblings, where you rarely have "naked" text nodes. (Often,
> there is at least a <p> element.)
>
> But that’s just my opinion.

Another obvious use-case is the fact that you can't implement
<details> in CSS right now.  When a <details> is closed, all of its
non-<summary> contents need to be hidden, but if those contents are
naked text (which is totally allowed), you can't do it.

We have a hack for this in Shadow DOM, but that just illustrates even
more why we need something for this:

In Shadow DOM, you can import elements from the light DOM into a
specific place in the shadow, by using <content>.  The <content>
element can have a select='' attribute, which takes a selector to
filter only the elements you want for that spot.  We have special
behavior that, if the select='' attribute doesn't have a value (that
is, <content select></content>), it selects *everything*, including
text nodes.  This is different from select="*", which only selects
real elements.  We had to add this special behavior because there's no
way to select text via a Selector currently.

(This lets us do <details> because <content> elements are evaluated in
document order, and earlier ones get first dibs on light DOM elements.
 So the shadow tree of <details> is basically just:

  <shadow>
    <div id=summary>
      <content select=summary></content>
    </div>
    <div id=content>
      <content></content>
    </div>
  </shadow>

And we flip the 'display' on #content based on whether it's open or not.)

~TJ

Received on Friday, 26 July 2013 17:08:04 UTC