# AUR0106

## Error Message

`AUR0106: Ast eval error: invalid assignment. "$host" is a reserved keyword.`

## Description

This error occurs when a binding expression attempts to assign a value to the special `$host` property (e.g., `$host = someValue`, `$host.property = someValue`). The `$host` property, which refers to the custom element's host element, is read-only within binding expressions and cannot be assigned to.

## Cause

The sole cause is attempting to write to `$host` or one of its properties directly within a binding expression. `$host` provides read-only access to the host element for inspection or calling its methods, not for modification via binding assignment.

## Solution

Do not attempt to assign values to `$host` in your binding expressions.

* If you need to modify properties of the host element, do so programmatically within the component's view model (e.g., using dependency injection to get the element reference if necessary, or manipulating its properties directly if appropriate).
* If you intended to assign to a property on the component's *view model* that happens to be named `host` or similar, ensure you are not accidentally using `$host`. Access view model properties directly (e.g., `host.someProperty = value`).

## Example

```html
<!-- my-component.html -->
<template>
  <!-- Incorrect: Attempting to assign to $host -->
  <button click.trigger="$host.title = 'New Title'">Set Host Title</button>

  <!-- Incorrect: Attempting to assign to a property of $host -->
  <input input.trigger="$host.dataset.value = $event.target.value">

  <!-- Correct: Reading from $host (Example) -->
  <p>Host width: ${$host.offsetWidth}</p>

  <!-- Correct: Calling a method on the host's view model (Example) -->
  <button click.trigger="updateHostTitle('New Title')">Set Host Title via VM</button>
</template>
```

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

@customElement({
  name: 'my-component',
  template // from my-component.html above
})
export class MyComponent {
  private readonly platform = resolve(IPlatform);

  // The host element is injected as the first constructor parameter without decorator
  constructor(private readonly element: HTMLElement) {}

  updateHostTitle(newTitle: string) {
    // Correct way to modify the host element programmatically
    this.element.title = newTitle;
    console.log('Host title set to:', this.element.title);
  }
}

```

## Debugging Tips

* Locate the assignment expression involving `$host` in your template.
* Refactor the logic to modify the host element programmatically from the view model if necessary.
* Ensure you are not confusing `$host` (the DOM element) with a view model property.