Concepts

Anatomy of a slide

A slide is an HTML element. Layouts give it structure, atoms fill the slots.

Three layers, always

Every slide is built from three concentric layers, top to bottom:

  1. A layout component · <deck-cover>, <deck-feature>, <deck-split>, <deck-feature-cards>, <deck-section>, or <deck-takeaway>.
  2. Named slots · the layout exposes slot="title", slot="lead", slot="left", slot="right". What you put there gets projected into the right spot.
  3. Atoms · <deck-code>, <deck-md>, <deck-callout>, <deck-card>, <deck-mermaid>, and the others fill the slots.
A typical hero slide
<deck-feature eyebrow="Module">
  <h1 slot="title">Side effects</h1>
  <p slot="lead" class="lead">
    A module can act on import.
  </p>
  <deck-code lang="ts" hero>
    import './polyfill';
  </deck-code>
</deck-feature>

<deck-root> · the wrapper

Every slide lives inside one <deck-root>. It manages navigation, the active-slide state, URL hash routing, the keyboard hint and the progress bar.

The minimal deck
<deck-root>
  <deck-cover><h1>Cover</h1></deck-cover>
  <deck-feature><h1 slot="title">Body</h1></deck-feature>
  <deck-takeaway>The point.</deck-takeaway>
</deck-root>

Sections enable 2D navigation

A <deck-section> isn't just a divider · it marks a chapter boundary. If you have at least two chapters and one of them has multiple slides, the deck switches to 2D navigation:

  • ← / → · jump between sections
  • ↑ / ↓ · walk slides inside a section
  • Space · always advances linearly

Without sections, all arrow keys do the same thing · linear next/prev. See Navigation for the full key map.

How a slide renders

The browser parses your HTML. Each <deck-*> element is a Custom Element registered by Rikiki. On connectedCallback it attaches a Shadow DOM and renders its template · slotted children flow into the named placeholders. The result:

  • Your CSS doesn't leak into the components (Shadow DOM isolates them).
  • Theme variables (--rik-accent, --rik-surface-page, …) do cross the boundary · they inherit from :root.
  • Each slide's :host rule decides the background, padding, layout direction.

Next