Concepts

Anatomy of a slide

For deck authors: how one <deck-*> element becomes the slide on screen, through its layout, its slots, its atoms and the Shadow DOM, so you know which layer to touch when a slide looks wrong.

Three layers

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

  1. A layout component · one of the eight layouts the package ships: <deck-cover>, <deck-section>,<deck-feature>, <deck-split>,<deck-feature-cards>, <deck-bento>,<deck-photo> and <deck-takeaway>. The layout decides the composition of the slide.
  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>
Live preview · slide canvas

<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>
Live preview · slide canvas

Sections

A <deck-section> is a chapter boundary as well as a divider: the arrow keys stay linear by default, and nav="2d" on<deck-root> turns the chapters into a grid. SeeNavigation for the key map and the 2D model.

How a slide renders

The framework is written with Lit, and each component renders inside a Shadow DOM. Lit & Shadow DOMexplains what that changes for your own CSS; this section gives the short version.

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 does not 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

  • Navigation · the keys, the mouse, the presenter window and the 2D grid.
  • Component library · every layout and atom with its attributes and slots.