{"action":"created","issue":{"url":"https://api.github.com/repos/w3c/webcomponents/issues/224","repository_url":"https://api.github.com/repos/w3c/webcomponents","labels_url":"https://api.github.com/repos/w3c/webcomponents/issues/224/labels{/name}","comments_url":"https://api.github.com/repos/w3c/webcomponents/issues/224/comments","events_url":"https://api.github.com/repos/w3c/webcomponents/issues/224/events","html_url":"https://github.com/w3c/webcomponents/issues/224","id":93214006,"number":224,"title":"[Custom Elements]: Custom elements should be display: block by default","user":{"login":"hayatoito","id":160288,"avatar_url":"https://avatars.githubusercontent.com/u/160288?v=3","gravatar_id":"","url":"https://api.github.com/users/hayatoito","html_url":"https://github.com/hayatoito","followers_url":"https://api.github.com/users/hayatoito/followers","following_url":"https://api.github.com/users/hayatoito/following{/other_user}","gists_url":"https://api.github.com/users/hayatoito/gists{/gist_id}","starred_url":"https://api.github.com/users/hayatoito/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hayatoito/subscriptions","organizations_url":"https://api.github.com/users/hayatoito/orgs","repos_url":"https://api.github.com/users/hayatoito/repos","events_url":"https://api.github.com/users/hayatoito/events{/privacy}","received_events_url":"https://api.github.com/users/hayatoito/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/w3c/webcomponents/labels/custom-elements","name":"custom-elements","color":"5319e7"},{"url":"https://api.github.com/repos/w3c/webcomponents/labels/needs%20consensus","name":"needs consensus","color":"d4c5f9"},{"url":"https://api.github.com/repos/w3c/webcomponents/labels/v1","name":"v1","color":"e11d21"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":11,"created_at":"2015-07-06T07:40:48Z","updated_at":"2016-03-08T00:39:14Z","closed_at":null,"body":"Title: [Custom Elements]: Custom elements should be display: block by default (bugzilla: 24876)\n\nMigrated from: https://www.w3.org/Bugs/Public/show_bug.cgi?id=24876\n\n----\ncomment: 0\ncomment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=24876#c0\n*Elliott Sprehn* wrote on 2014-03-01 08:38:13 +0000.\n\nAlmost every custom element I've seen so far has:\n\n\\<style\\>\n  :host { display: block }\n\\</style\\>\n\ninside the ShadowRoot, or a rule in the owning page that makes it into display: block since the default of display: inline for unknown elements is really never want you want. I've also seen lots of authors stumble trying to figure out why their custom elements look busted when they first start before they realize they all need this rule.\n\nI think we should consider add some kind of pseudo like :custom and then say the UA sheet has :custom { display: block } to make this simpler.\n\n----\n\ncomment: 1\ncomment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=24876#c1\n*Boris Zbarsky* wrote on 2014-03-01 20:15:58 +0000.\n\nCustom form controls presumably wouldn't be display:block...\n\n----\n\ncomment: 2\ncomment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=24876#c2\n*Elliott Sprehn* wrote on 2014-03-03 21:35:39 +0000.\n\n(In reply to Boris Zbarsky from comment #1)\n> Custom form controls presumably wouldn't be display:block...\n\nIndeed, they probably want to be display: inline-block. What I've observed is that in many modern applications custom elements are placed inside flex boxes so display: block is fine since they end up flexed anyway (if they were inline they end up inside anonymous blocks instead).\n\n----\n\ncomment: 3\ncomment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=24876#c3\n*Boris Zbarsky* wrote on 2014-03-03 22:15:19 +0000.\n\nInlines in a flex container don't create anonymous blocks; they just end up with a computed display of \"block\".  The only anonymous anything that happens with flexbox is that text that's a direct child of a flexbox is wrapped in an anonymous flex item."},"comment":{"url":"https://api.github.com/repos/w3c/webcomponents/issues/comments/193527875","html_url":"https://github.com/w3c/webcomponents/issues/224#issuecomment-193527875","issue_url":"https://api.github.com/repos/w3c/webcomponents/issues/224","id":193527875,"user":{"login":"JanMiksovsky","id":86139,"avatar_url":"https://avatars.githubusercontent.com/u/86139?v=3","gravatar_id":"","url":"https://api.github.com/users/JanMiksovsky","html_url":"https://github.com/JanMiksovsky","followers_url":"https://api.github.com/users/JanMiksovsky/followers","following_url":"https://api.github.com/users/JanMiksovsky/following{/other_user}","gists_url":"https://api.github.com/users/JanMiksovsky/gists{/gist_id}","starred_url":"https://api.github.com/users/JanMiksovsky/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/JanMiksovsky/subscriptions","organizations_url":"https://api.github.com/users/JanMiksovsky/orgs","repos_url":"https://api.github.com/users/JanMiksovsky/repos","events_url":"https://api.github.com/users/JanMiksovsky/events{/privacy}","received_events_url":"https://api.github.com/users/JanMiksovsky/received_events","type":"User","site_admin":false},"created_at":"2016-03-08T00:39:14Z","updated_at":"2016-03-08T00:39:14Z","body":"Wouldn't a global rule like `:potentiallycustom { display: block; }` mean that elements that *want* to be `display: inline-block` will still cause FOUC? Same thing for elements that want to be `flex`, etc. If you're using custom elements from mixture of sources, there's no way to anticipate the `display` setting desired by each element. We agree that `display: block` is very common, but it's not universal.\r\n\r\nFWIW, in practice nearly every element we create includes a shadow tree, so to prevent FOUC we end up needing to hide unresolved elements anyway. So point #1 hasn't been an issue for us. By the time the element is visible, it's applied its desired `display` setting."}}