[selectors] Pseudo-class to indicate when a slot has content

[plinss]

I'm developing several web components and I'm finding a need to tell when a slot has content or not. (e.g. to apply margins or not so empty slots don't impact layout, but layout well when they do, etc.)

The :empty pseudo-class applies when the slot doesn't have direct content, even when it has slotted content, so doesn't work. Using slot:has(::slotted(*)) wouldn't detect text-only content.

Once possibility would be to redefine :empty to detect slotted content, but it may be useful to keep the current behavior to differentiate empty slots from slots with default content (and the change may break exiting content). So a new pseudo-class that only detects slotted content may be useful.

[WickyNilliams]

I have also needed this on several occasions. At the moment, you need to (at the minimum) inspect assignedNodes/assignedElements to determine this, and then add css classes to elements to modify styling. This is far from ideal for such a common use case.

A typical use case for me is to hide (display:none) a <slot> if it is has no assigned content. The reason being that i often set a slot's display to something other than contents e.g. making a slot a flex container so that i can use gap to space slotted children.

So being able to target a slot with assigned content is the most pressing use-case. Though I think it's also worth considering whether there should be separate pseudo-class for each of these states:

• assigned content
• default content
• empty (i.e. no default or assigned content)

[MaxArt2501]

I'd like to point out that a :has-assigned-content pseudo-class (or better name) would be nice to have since:

• developers would like to avoid using JavaScript for what's basically a declarative effect;
• working around with :host(:not(:empty)) slot (for unnamed slots) or :host(:has([slot='foo'])) slot[name='foo']:
  • is verbose;
  • has content limitations (e.g. for components with multiple slots);
  • doesn't work for manual node assignment.

I'm quite keen myself to set a display value different than contents for slots, but this would also allow to style sibling or parent nodes (via :has()).

[castastrophe]

Perhaps inline with :has, :has-assigned (content could be a misnomer because it might contain text or nodes). This would enable styles such as:

slot[name='foo']:not(:has-assigned) {
   display: none;
}

A good partner to this spec would be #6620

[castastrophe]

This seems like a related request in the WICG space: WICG/webcomponents#936

[css-meeting-bot]

The CSS Working Group just discussed [selectors] Pseudo class to indicated when a slot has content, and agreed to the following:

• RESOLVED: Take this up for Selectors 5, fantasai and tabatkins will come back with proposed text

The full IRC log of that discussion

<emeyer> fantasai: I wanted to know if this is something we want to pursue. plinss was asked whether or not we can check to see if something has slotted content. Is this something we want to do?
<emeyer> TabAtkins: The use case makes sense and the argument is reasonable. The fact you can’t tell if text content has been slotted in leaves a whole. I say was call it ‘:slottted’
<fantasai> s/slottted/has-slotted/
<emeyer> PaulG: Is the example intended to be a slot name?
<emeyer> TabAtkins: ‘::slotted’ will select anything slotted into that slot.
<emeyer> fantasai: Tab and I should draft a proposal.
<emeyer> Rossen: Would this be level 4?
<emeyer> fantasai: No, 5
<fantasai> ACTION: Tab + fantasai to draft into Selectors 5
<emeyer> RESOLVED: Take this up for Selectors 5, fantasai and tabatkins will come back with proposed text