Description
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!