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

trescenzi has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-scoping] Clarification: behavior of `display: hidden` or `visibility: none` on a `slot` in a shadow tree ==
I believe this is the relevant [spec section](https://github.com/w3c/csswg-drafts/blob/105267561e9e7986f27ef4df4a7c1774ddf6e4fc/css-scoping-1/Overview.bs#L504) with regards to the display property of slots. [This issue in the spec](https://github.com/w3c/csswg-drafts/blob/105267561e9e7986f27ef4df4a7c1774ddf6e4fc/css-scoping-1/Overview.bs#L490) is also very relevant.

I've built a simple [reproducer](https://codepen.io/trescenzi/pen/ZRZLJE?editors=1010#0) 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 `display: 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 `display: hidden` or `visibility: 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](https://github.com/w3c/csswg-drafts/blob/105267561e9e7986f27ef4df4a7c1774ddf6e4fc/css-scoping-1/Overview.bs#L482) seems to indicate that the behavior of the up to date browsers is correct. i.e. hiding the slot should hide the children.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2903 using your GitHub account

Received on Tuesday, 10 July 2018 21:41:00 UTC