[webcomponents] [Custom Elements]: Custom elements should be display: block by default (bugzilla: 24876) (#224)

Title: [Custom Elements]: Custom elements should be display: block by default (bugzilla: 24876)

Migrated from: https://www.w3.org/Bugs/Public/show_bug.cgi?id=24876

----
comment: 0
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=24876#c0
*Elliott Sprehn* wrote on 2014-03-01 08:38:13 +0000.

Almost every custom element I've seen so far has:

\<style\>
  :host { display: block }
\</style\>

inside 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.

I 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.

----

comment: 1
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=24876#c1
*Boris Zbarsky* wrote on 2014-03-01 20:15:58 +0000.

Custom form controls presumably wouldn't be display:block...

----

comment: 2
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=24876#c2
*Elliott Sprehn* wrote on 2014-03-03 21:35:39 +0000.

(In reply to Boris Zbarsky from comment #1)
> Custom form controls presumably wouldn't be display:block...

Indeed, 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).

----

comment: 3
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=24876#c3
*Boris Zbarsky* wrote on 2014-03-03 22:15:19 +0000.

Inlines 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.

---
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/224