# AUR9990

## Error Message

`AUR9990: Invalid @slotted usage. @slotted decorator can only be used on a field`

## Description

This error occurs when the `@slotted` decorator, used for accessing nodes projected into specific slots within a component's shadow DOM, is applied incorrectly. The decorator is designed *only* to be used on class properties (fields).

## Cause

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

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

The decorator's implementation checks the context where it's applied and throws this error if it's not a 'field'.

## Solution

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

## Example

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

@customElement({
  name: 'my-card',
  template: `<template shadowrootmode="open">
    <slot name="header"></slot>
    <slot></slot> <!-- Default slot -->
    <slot name="footer"></slot>
  </template>`
})
export class MyCard {

  // Correct: @slotted applied to class properties
  @slotted('header') // Matches <slot name="header">
  headerNodes: Node[];

  @slotted() // Matches the default slot <slot>
  contentNodes: Node[];

  // Incorrect: @slotted applied to a method
  // @slotted('footer')
  // getFooter() { /* ... */ }

  // Incorrect: @slotted applied to a getter
  // @slotted()
  // get defaultSlotNodes() { /* ... */ }
}

// Incorrect: Applying @slotted to the class itself
// @slotted()
// @customElement({ /* ... */ })
// export class InvalidCard { /* ... */ }

```

## Debugging Tips

* Review the code where the `@slotted` decorator is used.
* Verify that the decorator is placed directly above a property declaration (e.g., `headerNodes: Node[];`).
* Ensure the decorator is not applied to methods, getters, setters, or the class itself.
* Confirm that the component using `@slotted` has Shadow DOM enabled (`shadowrootmode="open"` or configured via `shadowOptions` in the definition), as `@slotted` relies on the Shadow DOM projection mechanism.