# AUR0819

## Error Message

`AUR0819: Spreading to bindables onto non custom element`

## Description

This error indicates an attempt to use the spread syntax (`...`) to bind properties onto a target element that is not a custom element or doesn't support receiving spread bindings. The spread syntax is primarily intended for passing multiple bindable properties to custom elements or custom attributes designed to handle them.

*(Note: As of the current analysis, the exact code location throwing this specific error could not be identified, suggesting it might be related to experimental features, legacy code, or specific edge cases in template compilation/runtime processing. The description is based on the error message's intent.)*

## Cause

The likely cause is using the spread syntax on a standard HTML element or a component that isn't configured to accept spread bindings.

Example scenario leading to this error:

```html
<template>
  <require from="./my-view-model-data-provider"></require>

  <!-- Incorrect: Trying to spread onto a standard <div> -->
  <div ...${someObject}></div>

  <!-- Incorrect: Trying to spread onto a custom element not designed for it -->
  <some-element ...${someObject}></some-element>
</template>
```

The spread syntax (`...${expression}`) is typically used like this:

```html
<template>
  <require from="./my-component"></require>

  <!-- Correct: Spreading an object onto a custom element 'my-component' -->
  <!-- This assumes 'my-component' has bindables matching the keys in 'componentProps' -->
  <my-component ...${componentProps}></my-component>
</template>
```

Where `componentProps` might be an object like `{ title: 'Hello', count: 5 }`, and `my-component` would have corresponding `@bindable` properties `title` and `count`.

## Solution

1. **Target a Custom Element/Attribute:** Ensure the spread syntax (`...`) is used only on custom elements or custom attributes specifically designed to accept spread bindings.
2. **Bind Properties Individually:** If you intend to bind properties to a standard HTML element or a component not supporting spread, bind each property individually using standard binding commands (`.bind`, `.one-time`, attribute interpolation, etc.).
3. **Verify Component Implementation:** If spreading onto a custom element, ensure the element's definition correctly declares the corresponding `@bindable` properties.

## Example

```html
<template>
  <require from="./my-component"></require>

  <!-- Data to bind -->
  <!-- viewModel.componentData = { message: 'Welcome!', enabled: true }; -->

  <!-- Incorrect: Spreading onto a standard div -->
  <div ...${componentData}></div>

  <!-- Correct: Binding properties individually to a standard div (using hypothetical attributes) -->
  <div data-message.bind="componentData.message" data-enabled.bind="componentData.enabled"></div>

  <!-- Correct: Spreading onto a custom element designed for these bindables -->
  <my-component ...${componentData}></my-component>

</template>
```

```typescript
// my-component.ts (Example Custom Element)
import { bindable, customElement } from 'aurelia';

@customElement('my-component')
export class MyComponent {
  @bindable message: string = '';
  @bindable enabled: boolean = false;

  // This component is designed to accept 'message' and 'enabled'
  // properties, making it suitable for spread syntax with an object
  // containing these keys.
}
```

## Debugging Tips

* Identify the element where the spread syntax (`...`) is being used.
* Verify if the target element is a standard HTML element (like `div`, `span`, `input`) or a custom element (`<my-component>`).
* If it's a custom element, check its definition to ensure it has `@bindable` properties matching the keys in the object being spread.
* If it's a standard HTML element, refactor the binding to set attributes/properties individually.
* Consult the documentation or implementation of the target component if you are unsure whether it supports spread bindings.


---

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