Directives

Directives are colon-namespaced attributes (name:arg) the compiler lowers to runtime calls. Each one owns its whole attribute. Display is not a directive — read() is an expression, in text or attribute position, on server and client machines alike. Input capture is not a directive either: the control owns its draft, and a typed commit event crosses the boundary at change/submit — see Forms and inputs.

on: — events

The handler must be a single machine.send(...):

<button on:click={() => cart.send({ type: 'ADD_ITEM', productId: id })}>Add</button>

class:list

Strings, conditional records, or read() entries compose into one class attribute:

<button class:list={{ 'btn': true, 'in-cart': read(cart, c => c.contains(id)) }}>

style:list — reactive styles

Same model for inline styles:

<div style:list={{ color: read(theme, t => t.fg) }}>

ref: — element handles

ref:name marks an element; it surfaces as this.refs.name in a client component. Takes no value:

<canvas ref:chart></canvas>

Literal scripts: is:inline / src

An inline <script> is a client component. To emit a literal script instead, mark it:

<script is:inline>document.documentElement.dataset.theme = 'dark'</script>
<script src="/static/analytics.js"></script>