# AUR9991

## Error Message

`AUR9991: Invalid @children usage. @children decorator can only be used on a field`

## Description

This error occurs when the `@children` decorator, used for querying child elements within a component's view, is applied incorrectly. The decorator is designed *only* to be used on class properties (fields).

## Cause

The direct cause is applying the `@children` decorator to something that is not a class property. Examples include:

1. **Decorating a Method:** Applying `@children` to a method definition.
2. **Decorating a Class:** Applying `@children` directly to the class declaration.
3. **Decorating a Getter/Setter:** Applying `@children` to an accessor property.

## Solution

Ensure that the `@children` decorator is only applied directly to a class property declaration.

## Example

```typescript
import { customElement, children } from 'aurelia';

@customElement({
  name: 'my-component',
  template: `<slot></slot>`
})
export class MyComponent {

  // Correct: @children applied to a class property
  @children('div.item')
  items: HTMLDivElement[];

  // Incorrect: @children applied to a method
  // @children('div.item')
  // getItems() { /* ... */ }

  // Incorrect: @children applied to a getter
  // @children('div.item')
  // get itemElements() { /* ... */ }
}

// Incorrect: Applying @children to the class itself
// @children('div.item')
// @customElement({ /* ... */ })
// export class InvalidComponent { /* ... */ }
```

## Debugging Tips

* Review the code where the `@children` decorator is used.
* Verify that the decorator is placed directly above a property declaration (e.g., `items: HTMLElement[];`).
* Ensure the decorator is not applied to methods, getters, setters, or the class itself.

```
```