cnc-slides
An animated viewport for onboarding, wizards, and other step-based interfaces. Define every
slide as a named <template x-server> in the widget's default slot, then
navigate by dispatching next and prev events.
Quick start
The first template is used by default. Give each template a unique name and add
x-server
so CnC widgets and directives inside it are rendered before the browser clones the slide.
<cnc-slides initial-slide="intro">
<template name="intro" x-server>
<cnc-button @click="$dispatch('next')">Continue</cnc-button>
</template>
<template name="complete" x-server>
<cnc-button @click="$dispatch('prev')">Back</cnc-button>
</template>
</cnc-slides>Why slide templates use x-server
A native <template> is inert. Without x-server, its contents
are serialized as raw HTML and cnc-slides clones that HTML only after the page's
widget expansion pass. A nested <cnc-button> would therefore remain an
empty custom element instead of rendering its internal button.
Use x-server whenever a slide contains CnC widgets, bindings, or directives. It
is also safe—and recommended for consistency—to put it on every slide template. Plain
static HTML can render without it.
Navigation events
Dispatch these bubbling events from controls anywhere inside the active slide. The widget
consumes the event, prevents its default action, and stops it from bubbling beyond
<cnc-slides>.
| Event | Detail | Behavior |
|---|---|---|
| next | { name?: string } |
Advances to the next template in slot order. Supply { name: 'review' } to
navigate directly to a named template.
|
| prev | none | Returns to the previous slide in navigation history. |
A bare string is accepted as the detail too —
$dispatch('next', 'review')
and $dispatch('next', { name: 'review' })
do the same thing. A name that matches no template is ignored rather than erroring, so a typo
reads as a dead button.
These are the events the widget CONSUMES. It emits none of its own, so nothing outside the deck
is told when the slide changes. The same two moves are also on the element as _next(name) and
_prev()
for a host holding a reference, though dispatching the event is the supported form.
Usage guidance
Slides suit a linear path a user walks once — onboarding, a wizard, a setup flow. It is
the wrong widget for content the user picks between and returns to: that is
cnc-tabs, which keeps every panel addressable and does not rebuild one each time
you arrive. Reach for cnc-carousel when the content is a gallery rather than a
sequence of steps.
Keep slide state OUTSIDE the deck. Each advance clones the template's HTML afresh, so anything a
user typed on a slide is gone the moment they move on and comes back blank if they return. Bind
a wizard's fields to state held on a surrounding x-data, and treat the slide as a
view of that state rather than the place it lives.
The widget emits nothing and does not report its position, so a host cannot currently observe
which slide is showing. Where a step number needs to appear outside the deck, track it yourself on the same
x-data
that dispatches next and prev.