{"action":"created","issue":{"url":"https://api.github.com/repos/w3c/csswg-drafts/issues/2903","repository_url":"https://api.github.com/repos/w3c/csswg-drafts","labels_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/2903/labels{/name}","comments_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/2903/comments","events_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/2903/events","html_url":"https://github.com/w3c/csswg-drafts/issues/2903","id":340017081,"node_id":"MDU6SXNzdWUzNDAwMTcwODE=","number":2903,"title":"[css-scoping] Clarification: behavior of `display: hidden` or `visibility: none` on a `slot` in a shadow tree","user":{"login":"trescenzi","id":827851,"node_id":"MDQ6VXNlcjgyNzg1MQ==","avatar_url":"https://avatars0.githubusercontent.com/u/827851?v=4","gravatar_id":"","url":"https://api.github.com/users/trescenzi","html_url":"https://github.com/trescenzi","followers_url":"https://api.github.com/users/trescenzi/followers","following_url":"https://api.github.com/users/trescenzi/following{/other_user}","gists_url":"https://api.github.com/users/trescenzi/gists{/gist_id}","starred_url":"https://api.github.com/users/trescenzi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/trescenzi/subscriptions","organizations_url":"https://api.github.com/users/trescenzi/orgs","repos_url":"https://api.github.com/users/trescenzi/repos","events_url":"https://api.github.com/users/trescenzi/events{/privacy}","received_events_url":"https://api.github.com/users/trescenzi/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-07-10T21:40:54Z","updated_at":"2018-07-16T22:21:10Z","closed_at":null,"author_association":"NONE","body":"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.\r\n\r\nI've built a simple [reproducer](https://codepen.io/trescenzi/pen/ZRZLJE?editors=1010#0) that hopefully speaks to my question.\r\n\r\nI'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.\r\n\r\nThe 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.\r\n\r\nThanks!"},"comment":{"url":"https://api.github.com/repos/w3c/csswg-drafts/issues/comments/405399578","html_url":"https://github.com/w3c/csswg-drafts/issues/2903#issuecomment-405399578","issue_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/2903","id":405399578,"node_id":"MDEyOklzc3VlQ29tbWVudDQwNTM5OTU3OA==","user":{"login":"tabatkins","id":682840,"node_id":"MDQ6VXNlcjY4Mjg0MA==","avatar_url":"https://avatars0.githubusercontent.com/u/682840?v=4","gravatar_id":"","url":"https://api.github.com/users/tabatkins","html_url":"https://github.com/tabatkins","followers_url":"https://api.github.com/users/tabatkins/followers","following_url":"https://api.github.com/users/tabatkins/following{/other_user}","gists_url":"https://api.github.com/users/tabatkins/gists{/gist_id}","starred_url":"https://api.github.com/users/tabatkins/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tabatkins/subscriptions","organizations_url":"https://api.github.com/users/tabatkins/orgs","repos_url":"https://api.github.com/users/tabatkins/repos","events_url":"https://api.github.com/users/tabatkins/events{/privacy}","received_events_url":"https://api.github.com/users/tabatkins/received_events","type":"User","site_admin":false},"created_at":"2018-07-16T22:21:10Z","updated_at":"2018-07-16T22:21:10Z","author_association":"MEMBER","body":"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.\r\n\r\nSo, 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."}}
{"actor":{"display_login":"tabatkins"}}