# AUR0718

### **Error message**

Spreading template controller "{{0}}" is not supported.

### **Parameters**

1. `attributeName`: The name of the template controller attribute being spread.

### Error explanation

This error occurs during the compilation of attribute spreading (using the `...$attrs` syntax or programmatically via `IResourceResolver.compileSpread`). The compiler detected an attempt to spread an attribute that is also a template controller (e.g., `if`, `repeat.for`, `with`, `au-compose`, `portal`).

Spreading allows passing through attributes and bindings to an underlying element or component, but template controllers fundamentally alter the rendering structure and cannot be meaningfully spread onto another element.

### Common causes

* Capturing attributes using `...$attrs` on a component and passing them to an inner element where one of the captured attributes is a template controller.

### How to fix

* Avoid spreading template controllers. Template controllers should be applied directly to the elements they are intended to control.
* If you need conditional logic or repetition based on the context where attributes are spread, consider passing specific data properties instead of spreading the template controller attribute itself. Refactor the receiving component to use the passed data with its own template controllers.

### Example of Incorrect Usage:

```html
<!-- my-wrapper.html -->
<template>
  <!-- Capturing all attributes, including potential template controllers -->
  <div ...$attrs>
    <slot></slot>
  </div>
</template>

<!-- usage.html -->
<import from="./my-wrapper"></import>

<!-- Error occurs during spread compilation because 'if.bind' is a template controller -->
<my-wrapper if.bind="condition" class="extra-styling"></my-wrapper>
```

### Example of Correct Usage (Passing Data Instead):

```typescript
// my-wrapper.ts
import { customElement, bindable } from 'aurelia';

@customElement({ name: 'my-wrapper', template: `...`})
export class MyWrapper {
  // Define a specific bindable for the condition
  @bindable showContent: boolean = true;
}
```

```html
<!-- my-wrapper.html -->
<template>
  <!-- Use the specific property with an internal template controller -->
  <div if.bind="showContent" class="original-styling">
    <slot></slot>
  </div>
</template>

<!-- usage.html -->
<import from="./my-wrapper"></import>

<!-- Pass the condition as data, spread other attributes if needed -->
<my-wrapper show-content.bind="condition" class="extra-styling"></my-wrapper>
```


---

# 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/0088-to-0723/aur0718.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.