# AUR9998

## Error Message

`AUR9998: Spread binding does not support spreading custom attributes/template controllers. Did you build the spread instruction manually?`

## Description

This error occurs when the spread syntax (`...`) is used in a way that attempts to apply bindings to a target that is identified as a custom attribute or, more specifically, a template controller (like `if.bind`, `repeat.for`, `with.bind`, `au-slot`, etc.).

Spread syntax is intended to set multiple bindable properties on a custom *element* (e.g., `<my-element ...options>`) or bind multiple standard HTML attributes. It is not designed to work with custom attributes that act as template controllers or have complex behaviors beyond simple property setting.

## Cause

1. **Incorrect Target:** You are trying to use spread syntax directly on an attribute that is a template controller or a custom attribute with complex behavior.
   * Example: `<div if.bind="condition" ...settings></div>` - Attempting to spread `settings` onto the `if` attribute is invalid.
2. **Manual Instruction Creation (Advanced):** If you are manually creating rendering instructions (a very advanced scenario, usually not done in application code), you might have incorrectly created a spread instruction targeting a template controller or custom attribute definition.

## Solution

1. **Target Custom Elements:** Ensure spread syntax is used on custom *elements* to set their bindable properties, or on standard HTML elements to set standard attributes.
2. **Bind Properties Individually:** If you need to bind properties related to a template controller's behavior, bind them individually to the view model properties that the controller uses. You cannot spread an object directly onto the controller attribute itself.
3. **Refactor Component:** If you were trying to pass many options to a template controller, consider refactoring. Perhaps the logic can be moved into a custom element, which *can* accept spread properties.

## Example

```html
<!-- Incorrect: Spreading onto 'if.bind' (template controller) -->
<template>
  <div if.bind="show" ...layoutOptions>Content</div>
</template>

<!-- Incorrect: Spreading onto a hypothetical complex custom attribute 'my-complex-attr' -->
<template>
  <div my-complex-attr="value" ...moreOptions>Content</div>
</template>

<!-- Correct: Spreading onto a custom *element* -->
<template>
  <user-profile ...profileData></user-profile>
</template>

<!-- Correct: Binding individual properties, controller uses them -->
<template>
  <div if.bind="userIsActive && userHasPermission">...</div>
  <div repeat.for="item of items | filter:searchTerm | sort:sortOrder">...</div>
</template>
```

```typescript
// View Model illustrating individual binds for controllers
import { customElement } from 'aurelia';
import './user-profile'; // Assume registered custom element

@customElement({ /* ... */ })
export class MyViewModel {
  // Data for spread on custom element
  profileData = { name: 'Jane', email: 'jane@example.com' };

  // Properties used by template controllers
  show = true;
  layoutOptions = { padding: '10px', margin: '5px' }; // Cannot spread this onto 'if'

  userIsActive = true;
  userHasPermission = false;

  items = [{id: 1, name: 'A'}, {id: 2, name: 'B'}];
  searchTerm = '';
  sortOrder = 'name';
}
```

## Debugging Tips

* Identify the element and attribute where the spread (`...`) syntax is being used in your template.
* Verify if the attribute name being targeted by the spread (or the attribute immediately preceding the spread) is a template controller (`if`, `repeat`, `with`, `replaceable`, `au-slot`, etc.) or a custom attribute known to have complex behavior.
* Refactor the template to bind properties individually instead of using spread on that specific attribute.