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 {
// Inject the host element
constructor(private readonly element: HTMLElement, @IPlatform platform: IPlatform) {}
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.
Last updated
Was this helpful?