This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 24876 - [Custom Elements]: Custom elements should be display: block by default
Summary: [Custom Elements]: Custom elements should be display: block by default
Status: RESOLVED MOVED
Alias: None
Product: WebAppsWG
Classification: Unclassified
Component: HISTORICAL - Component Model (show other bugs)
Version: unspecified
Hardware: PC All
: P2 normal
Target Milestone: ---
Assignee: Dimitri Glazkov
QA Contact: public-webapps-bugzilla
URL:
Whiteboard:
Keywords:
Depends on:
Blocks: 14949
  Show dependency tree / graph
 
Reported: 2014-03-01 08:38 UTC by Elliott Sprehn
Modified: 2015-07-06 08:08 UTC (History)
4 users (show)

See Also:

Attachments

Description Elliott Sprehn 2014-03-01 08:38:13 UTC 
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 Boris Zbarsky 2014-03-01 20:15:58 UTC 
Custom form controls presumably wouldn't be display:block...
Comment 2 Elliott Sprehn 2014-03-03 21:35:39 UTC 
(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 Boris Zbarsky 2014-03-03 22:15:19 UTC 
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.
Comment 4 Hayato Ito 2015-07-06 08:08:37 UTC 
Moved to https://github.com/w3c/webcomponents/issues/224