Bindings

Bindings connect state to the DOM.

behavior .card {
  title: "Hello";
  @aria-label :< title;
}

Operators

• : one-time set
• := two-way binding
• :< scope → element
• :> element → scope

Attribute vs style

behavior .card {
  highlight: true;
  @aria-pressed :< highlight;
  $display :< highlight ? "block" : "none";
}

Two-way binding

<input class="name" />

behavior .name {
  value: "";
  @value := value;
}

Typing updates value in scope, and scope updates reflect back into the input.

Notes from the creator

If you don’t understand this section, congratulations, you’re using it correctly.