Could display:block instead of display:inline-block for <sl-card> be better?

[trusktr]

I've wrestled for quite a while to figure out why some random overflow was causing empty space inside my container around an <sl-card>.

It turned out that because of CSS text/font layout, even though nothing was sticking out beyond the boundaries of the card, there was empty space between the top edge of my <sl-card> and the top edge of the parent container (probably some font baseline layout based on treating the whole card as a effectively a letter).

I can't recall having ever set display:inline-block or display:inline to any of my custom elements before, and I always change the default from inlint to block, contents, or flex.

There's this discussion in Web Components,

WICG/webcomponents#723

where developers express they generally want a default like block or contents, which I think makes sense, but the technical limitation of switching the display value upon custom element upgrade prevented it.

I believe that if someone really needs something to be flowing within text, then they can easily opt into inline, and this will just save people from unexpected layout headaches.

Font rendering (even when there's no text, only elements with display:inline-block!) causes unexpected issues, for example as we reduce the size of an inline-block element, it starts to vertically displace when height approaches 0, which for most people is unexpected. Most people don't deal with font/text layout, they just place some text and move along, so block seems like a simple default.

Here's an example:

https://codepen.io/trusktr/pen/QWRRWbE

As the height of the canvas gets smaller, the canvas is no longer aligned with the top of the div.

Video for convenience (all the code is visible in the shot):

Screen.Recording.2024-06-28.at.12.01.52.AM.mov

[claviska]

Cards aren't typically presented full-width from what I've seen, so the default display lets them live in a row without additional styles. This is largely preference, though. It's a pretty easy fix if you don't like that default though:

sl-card {
  display: block;
}

(Note that many of the examples have a max-width set, which you'd need to remove if you're copying/pasting examples.)