W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2018

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

From: Thomas Crescenzi via GitHub <sysbot+gh@w3.org>
Date: Tue, 10 Jul 2018 21:40:54 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-340017081-1531258854-sysbot+gh@w3.org>
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.

Thanks!

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

This archive was generated by hypermail 2.3.1 : Tuesday, 10 July 2018 21:41:01 UTC