Slots

steam-block exposes exactly two named slots. Anything can go in either one. The component only lays things out, it never restyles what you give it.

Slot	Purpose
`content`	Text, headings, buttons, or any other markup. Rendered on top in `hero`, beside the media in `split`.
`media`	An `<img>`, `<video>`, `<iframe>`, inline `<svg>`, any embeddable element or just an empty `div`. Fills the section by default (`object-fit: cover`) unless `data-size="auto"` is set (see Helpers).

<steam-block>
  <div slot="content">
    <h2>Heading</h2>
    <p>Any markup you like goes here.</p>
  </div>
  <img slot="media" src="photo.jpg" alt="">
</steam-block>

Content slot

The content slot accepts multiple children (headings, paragraphs, lists, buttons, …), but the convention is one wrapper <div slot="content">holding all of them, since the --steam-block-content-* CSS variables target that one element.

The deliberate exception: skip the wrapper and slot several elements individually to lay them out as columns, --steam-block-content-display: grid plus --steam-block-content-grid-template-columns/--steam-block-content-gap, no page-level CSS needed, see CSS Variables.

Media slot

The media slot is the opposite: put slot="media" directly on the <img>/<video>/<iframe> itself, never on a wrapping <div>around it. The shadow DOM can only style the element that actually carries slot="media", it has no way to reach inside a wrapper to size whatever’s nested in it, so <div slot="media"><img src="photo.jpg"></div>renders the image at its own raw, unstyled size instead of filling the media area.

If you only want to display a background color with --steam-block-background (or --steam-block-media-before-background, or --steam-block-media-after-background), just set <div slot="media"></div>.

If you need to style the media area itself (border, mask, blend mode, …), reach for the --steam-block-media-* CSS variables instead of adding a wrapper, see CSS Variables.