Behaviors & selectors

Behaviors are scoped with CSS selectors. If the selector matches an element, the behavior applies. This keeps the mental model familiar and lets you lean on specificity.

Basic selector

behavior .card {
  active: false;
}

Every .card element gets its own scope and state.

Nested behaviors

You may group elements together in a behavior tree. Each matched element in the behavior tree gets their own scope and can access variables in their parents' scopes all the way up to the root scope. The root scope in the following example is .card.

behavior .card {
  active: false;

  behavior > .btn-close {
    @aria-pressed:< active; // @aria-pressed is bound from active

    on click() { active = !active; } // active is toggled on the scope for .card
  }
}

Only .btn-close elements inside .card are affected.

Specificity & overrides

When multiple behaviors match the same element:

• Events accumulate.
• State uses the most specific selector.
• !important flag prevents overrides.

Examples

behavior .card { theme: "light"; }
behavior .card.primary { theme: "brand"; }

The .card.primary behavior wins for theme.

Notes from the creator

You can nest behaviors indefinitely. We haven’t tested how far, but we believe in you.