Directives
Directives are colon-namespaced attributes (name:arg) the compiler lowers to runtime calls. Each one owns its whole attribute.
on: — events
Section titled “on: — events”The handler must be a single machine.send(...):
<button on:click={() => cart.send({ type: 'ADD_ITEM', productId: id })}>Add</button>class:list — reactive classes
Section titled “class:list — reactive classes”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
Section titled “style:list — reactive styles”Same model for inline styles:
<div style:list={{ color: read(theme, t => t.fg) }}>bind: — DOM ↔ state
Section titled “bind: — DOM ↔ state”One-way (bind:text, bind:html, bind:disabled) and two-way (bind:value, bind:checked, client-only) bindings. Full treatment in Forms and binding:
<span bind:text={theme.label}></span><input bind:value={draft.name} />ref: — element handles
Section titled “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
Section titled “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>