[css-scoping-1] add :has-slotted() pseudo class

[keithamus]

Based on the discussion in #6867, and the conclusions within, I thought I'd have a go at specifying a :has-slotted( <<compound-selector>> ) pseudo class.

I put this in css-scoping-1; the resolution was to add it in css-selectors-5 but I thought it might be useful living next to :host, :host(), :host-context() and ::slotted(). I am of course happy to move it if folks disagree with this choice.

My intent for this PR is largely to present something worthy of discussion. I hope I've achieved that, apologies if this PR amounts to just noise.

[justinfagnani]

"if one of its assigned, after flattening, matches "

Is there a missing word there? "child elements"?

[justinfagnani]

Do you want to use the <::shadow> markup here?

[Westbrook]

Exciting start! Points to the need for :host:has(...) support so that we aren't required to ship arbitrary wrapping elements, but that's a argument for another day.

If you haven't already, I think I might take a pass some tentative WPTs based on this outline during the week of the 12th.

[Westbrook]

"after flattening" is interesting here because it give "non-slotted" content while being required to gather all slotted content. E.G.:

<div>
  <template shadowrootmode="open">
    <style>
      div {
        color: green;
      }
      :has-slotted(div) {
        color: red;
      }
    </style>
    <slot><div>Test</div></slot>
  </template>
</div>

In the example above "Test" will display red in the case that flattened elements are leveraged.

However, if you don't use flattened elements:

<div>
  <template shadowrootmode="open">
    <div>
      <template shadowrootmode="open">
        <style>
          div {
            color: green;
          }
          :has-slotted(div) {
            color: red;
          }
        </style>
        <slot></slot>
      </template>
      <slot><div>Test</div></slot>
    </div>
  </template>
</div>

This "Test" will also be red. And, without flattened elements,

<div>
  <template shadowrootmode="open">
    <div>
      <template shadowrootmode="open">
        <style>
          div {
            color: green;
          }
          :has-slotted(div) {
            color: red;
          }
        </style>
        <slot></slot>
      </template>
      <div>Test</div>
    </div>
  </template>
</div>

This "Test" will also be red.

I'm not sure it's a real thing, but is there a place between ::slotted(*) and .assignedElements({flatten: true}) that would resolve the external assigned to a slot and not the default ones internal to the shadow host?

[sorvell]

For consistency, I think it's important that :has-slotted matches using the same rules for matchable elements as ::slotted.

Concretely, since ::slotted() never matches either <slot> or fallback content, :has-slotted also should not match when it would by selecting either <slot> or fallback content.

See #5482. IMO, the spec is still very confusing and possibly indicates that this should match, but the CSS working group resolved that the current behavior is intended in #5482.

I think matching against fallback content both for ::slotted and :has-slotted is valuable, but I suggest it should be tackled as a follow-on to this feature.

[LeaVerou]

@keithamus could you please rebase to resolve conflicts? Also, I wonder if it may be better to do this in two steps: get the non-functional form in first (:has-slotted) which already addresses some of the use cases and is way easier to implement, and then extend it to the functional form which appears to require more design discussion.

Looking at the resolution it is unclear if it even allows for a functional form, given the original proposal was for a non-functional form. In fact, the non-functional form is not simply an alias for :has-slotted(*), since the latter would not detect slotted text nodes.