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

<!-- 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>

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