# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aurelia.io/developer-guides/error-messages/runtime-html/aur9998.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.