Webcomponents: Having slots as element prevents styling empty containers

[heruan]

Having slots as element prevents styling empty containers, e.g.

<my-layout-component>
  <slot name="foo"></slot>
</my-layout-component>

Say I need to hide my-layout-component if empty, this won't work:

my-layout-component:empty {
  display: none;
}

because there's the slot, even if I do not place any element in it via slot="foo".

[annevk]

@tabatkins @fantasai perhaps this is something Selectors can address? (I was initially thinking maybe it could be part of :blank, but I guess that would not work for Firefox.)

[annevk]

If any nodes get assigned to this slot, would you still want the selector to match?

[heruan]

Nope, if nodes get assigned to the slot the selector shouldn't match.

[nstansbury]

This is a great use-case for allowing complex selectors - ::slotted(:empty)

[rniwa]

Since slot's style can be overridden to not be display: contents, I don't think we should create a solution specific to slots here.

Instead, what we want probably is more generic version of :empty which ignores some elements.

[annevk]

@rniwa that's not the semantic this is looking for. This is trying to distinguish slot with nodes assigned and slot without nodes assigned.

[rniwa]

@annevk : That could be exposed as a pseudo class on a slot, right? e.g. :empty. Once we have that, my-layout-component:empty-excluding(slot:empty) would do where :empty-excluding is the generic empty pseudo class I'm talking about here.

Note that :empty-excluding would be an expensive pseudo class to add (special purpose pseudo class that only works for slot has the same performance problem) so I'm not certain CSS WG would be willing to add such a thing.

[annevk]

@rniwa if we gave :empty new meaning yes. At the moment :empty doesn't take assigned nodes into account, only actual children. So rather than :empty I think you need something like :has-assigned for that. And after that yes, you'd also need something new on the parent at which point it probably gets too complicated performance-wise.

[rniwa]

I don't think there is any simpler solution here. The problem here is that we want to decide the emptiness of a parent element of a slot based on its content. There is no solution more efficient than what I proposed as far as I can tell.

[annevk]

Yeah, as long as :has() isn't part of the live profile this can't be solved: https://drafts.csswg.org/selectors/#profiles. :has-assigned for matching slots with assigned nodes might still be interesting, if there's more demand for it. Okay, let's close this.

@heruan if you still wish to pursue this, it's probably best raised at https://github.com/w3c/csswg-drafts/issues/new, but please do try to figure out responses to the above concerns before doing so. Thanks!

[morewry]

Am I understanding this correctly?

my-layout-component:not(:has(slot:has-assigned)) {
  display: none;
}

Would be pretty close. Only, there's no :has-assigned-equivalent specified yet and :has won't actually work for this purpose because it's not part of the live profile?

[tabatkins]

Yes.