HTX Guide · 1.5.0-alpha.2

Components & slots

Registered components with named slots.

HTX 1.5.0-alpha.2 (reference implementation 0.3.0-alpha.3) — Features below are available in the htx CLI unless noted as browser-only.

Status: Shipped in reference implementation 0.3.0-alpha.3 (HTX 1.5.0-alpha.1)

Motivation

Reusable UI patterns (alerts, cards with actions, tabs) need named content regions without copying boilerplate. Slots provide a Markdoc-like component model without executable logic.

Syntax

::component [Alert] { variant="warning" }
  ::slot [title]
    Degraded performance
  ::
  ::slot [body]
    Memory utilization is at **94%**.
  ::
  ::slot [actions]
    :span{.btn}[Restart] :span{.btn-secondary}[Dismiss]
  ::
::

Rules

  1. ::component [Name] declares a component instance. Name maps to a registered component in the compiler profile.
  2. ::slot [slotName] defines a named region. Unknown slot names are diagnostics.
  3. Slots contain block-level content only.
  4. Components without slots treat inner content as default slot.

Compiler behavior

Profile Output
html <div data-component="Alert" data-variant="warning"> with slotted children
web-components <htx-alert variant="warning"> with <span slot="title">
react <Alert variant="warning"> with children props

Registration (tooling)

// Example registry — not normative API yet
registerComponent('Alert', {
  slots: ['title', 'body', 'actions'],
  required: ['body'],
});

AI agent guidance

  • Use slots for structurally distinct regions (title vs body vs actions)
  • Keep slot names stable across documents
  • Prefer argument on ::card for simple titles; use slots when >1 region

Prior art

  • Markdoc tags with named attributes
  • Web Components <slot>
  • Vue/Svelte slot patterns