csswg-drafts icon indicating copy to clipboard operation
csswg-drafts copied to clipboard

[css-scoping] `::slotted` should skip direct children with `display: contents`

Open jpzwarte opened this issue 3 years ago • 3 comments

When creating web components/custom elements, the ::slotted pseudo element is very useful for styling slotted children. However, if such a child has display: contents, even though that child has no "presence" in the browser, the ::slotted styling is still applied to it, instead of the children of the display: contents element.

Please change the behavior so ::slotted skips any direct children with display: contents.

https://github.com/w3c/csswg-drafts/blob/9d693a6b2f69b1a34ee39bbb8918ac1ec7137468/css-scoping-1/Overview.bs#L352

jpzwarte avatar Jun 30 '21 09:06 jpzwarte

Changing how a selector matches based on computed styles is quite tricky. What if you set display: contents on an slotted selector?

emilio avatar Jun 30 '21 12:06 emilio

Changing how a selector matches based on computed styles is quite tricky.

Agreed, though there should not be visible styling if the slotted element has display:contents, and it sounds like there is.

LeaVerou avatar Oct 19 '22 18:10 LeaVerou

It's been a while, but iirc I'm not suggesting a display: contents suddenly has visible styling. Reading this again, I tend to agree that it is a not valid issue.

jpzwarte avatar Oct 19 '22 20:10 jpzwarte