1 viewer
Back to Components
Component · Content

ImgSlot

Image placeholder with optional tag and dimensions overlay.

Category
Content
Slots
4
States
0
Writer
Shared
cre8.primitive.img-slot

Preview

Live renderShared SSR + WASM writers
Architecture Spec
16:9 1920x1080
<ImgSlot
  alt="CRE8 Architecture Diagram"
  dims="16:9 1920x1080"
  height={240}
  id="slot-architecture-preview"
  tag="Architecture Spec"
/>

Anatomy

The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.

SlotDOM class
root.cre8-img-slot
placeholder.cre8-img-slot__placeholder
tag.cre8-img-slot__tag
dims.cre8-img-slot__dims
4 rows

States and platforms

The states the contract publishes, the platforms it declares, and the style recipes that dress it.

States
No published states
Platforms
webruntime-node
Recipes
unstyledruntime-console

Renderers

Shared writer
ImgSlot renders through the one writer the server and the WASM DOM share, so both emit the same markup.

Every tag in the example above renders through a shared writer.

Declared adapters. A status is the manifest's declaration, not a measured parity result.

TargetRendererStatus
webreactexperimental
runtime-nodeview-nodeready
ssrhtml-semanticready
terminalterminal-textplanned
4 rows

Accessibility

An image with alt text or a decorative placeholder hidden from assistive technology.

  • Images require alt text.
  • Placeholder divs use aria-hidden.
  • Lazy loading is enabled by default.