State & Scope

Every element that matches a behavior gets its own scope. Scopes form a tree that mirrors the DOM, so state can flow down the page.

Scope lookup

Lookup order is:

1) local scope
2) parent scope(s)
3) root scope (top level behavior in tree)

You can also be explicit:

• self.count
• parent.count
• root.count

Example

behavior .list {
  count: 0;

  behavior .item {
    on click() { root.count += 1; }
  }
}

Each .item increments the .list state using root.

Assignments

• A plain assignment updates the nearest scope that already has the variable.
• Use self. to force a local variable on the current element.
• Use root. or parent. when you need explicit scope control.

Gotchas

• If a variable doesn’t exist anywhere, it’s created on the local scope.
• Nested behaviors share the same behavior tree root, not the document root.