# FAST Element v2 Quick Reference

Quick API reference for FAST Element v2.

## Core Imports

```typescript
import {
  FASTElement,
  customElement,
  html,
  css,
  attr,
  observable,
  volatile,
  when,
  repeat,
  ref,
  children,
  slotted,
} from '@microsoft/fast-element';
```

## Decorators

| Decorator | Purpose |
|-----------|---------|
| `@customElement` | Define custom element |
| `@attr` | HTML attribute (reflected) |
| `@observable` | Reactive internal state |
| `@volatile` | Computed value |

## Template Helpers

| Helper | Purpose |
|--------|---------|
| `when(condition, template)` | Conditional rendering |
| `repeat(items, template)` | List rendering |
| `ref('propName')` | DOM element reference |

## Bindings

```typescript
// Text: ${x => x.value}
// Event: @click="${x => x.handler()}"
// Boolean attr: ?disabled="${x => x.disabled}"
// Property: :value="${x => x.value}"
```

## Lifecycle

| Method | When |
|--------|------|
| `connectedCallback()` | Added to DOM |
| `disconnectedCallback()` | Removed from DOM |
| `[prop]Changed(old, new)` | Property changed |

## Events

```typescript
this.$emit('event-name', data);
this.$emit('event-name', data, { bubbles: true, composed: true });
```

## Links

- [Official Docs](https://www.fast.design/)
- [API Reference](https://www.fast.design/docs/fast-element/getting-started)
