[css-scoping] Clarification: behavior of display: hidden or visibility: none on a slot in a shadow tree

[trescenzi]

I believe this is the relevant spec section with regards to the display property of slots. This issue in the spec is also very relevant.

I've built a simple reproducer that hopefully speaks to my question.

I've been working with web components a good deal lately and I recently ran into a situation where I wanted to conditionally hide a slot. Instead of conditionally rendering it, I chose to conditionally set visibility: hidden on it. This worked, as I had expected it to, in both Chrome 67, Safari latest and Firefox 61 with shadowDOM turned on. However a coworker who hadn't upgraded Chrome yet noted that it didn't work. Looking back at recent versions of Chrome it appears that only in Chrome 67+ does visibility: hidden or display: none hide a slot. This lead me to question how display works with CSS in the slot's tree because both behaviors seemed reasonable at first glance.

The general question is something like: does the box generated by a slot, given a display property other than contents, include the children and, then does hiding that box hide the children. The note on line 482 seems to indicate that the behavior of the up to date browsers is correct. i.e. hiding the slot should hide the children.

Thanks!

[tabatkins]

Assigning children to a slot happens regardless of the slot's style; it's a DOM-level process. Displaying the children is determined by the slot's styles as normal; display:none on the slot should prevent it, or any of its assigned elements, from generating boxes.

So, modern browser behavior is correct. I suspect that previous behavior was from treating slot more magically, such that it actually gets replaced by its children, rather than the specced method of filling it with its children and then using display:contents to remove it at rendering time.

[trescenzi]

Sweet. Thanks for taking the time to respond and clarify.

Closing this given that it's not an issue and has been clarified 😄