AUR0105
Error Message
AUR0105: Ast eval error: unable to find $host context. Did you forget [au-slot] attribute?
Description
This error occurs when a binding expression attempts to access the special $host property, but the current evaluation context does not have an associated host element. The $host property is primarily used within the context of Shadow DOM and content projection (slots) to refer to the custom element host itself.
Cause
The most common reasons for this error are:
Incorrect Usage Context:
$hostis used in a binding expression outside of a component template where it makes sense, such as within a projected slot or potentially within the component's own template when Shadow DOM is enabled. Using it in a top-level application template or a component that doesn't utilize Shadow DOM or slots might lead to this error.Missing
au-slotAttribute (Potential Hint): The error message hints at[au-slot]. While$hostisn't directly tied only toau-slot, its common use case is within slotted content. If you intend to access the host from projected content, ensure the slot projection mechanism (au-slot,<slot>, etc.) is set up correctly. Accessing$hostfrom content not projected viaau-slotmight fail to find the context.Internal Evaluation Issues: In rarer cases, an internal Aurelia issue or an unusual component composition scenario might prevent the
$hostcontext from being correctly propagated.
Solution
Verify Usage Context: Ensure
$hostis only used where it's valid, typically within a custom element's template (especially when using Shadow DOM) or within content projected into that element using slots (au-slotor native<slot>). Avoid using$hostin contexts where there is no clear custom element host (like the root application template).Check Slot Setup: If using
$hostwithin projected content, double-check your slot implementation (au-slotattributes on the content, corresponding<slot>elements orau-slotprocessing in the component's template).Use Alternatives: If you need access to the component instance itself rather than the DOM host element, use standard view model properties or methods. If you need the DOM element containing the binding, consider using
@refin specific scenarios, although$hostspecifically refers to the custom element's host.
Example
<!-- my-component.html -->
<template shadowrootmode="open">
<slot></slot> <!-- Native slot element -->
<!-- Accessing $host within the component's own template (often valid) -->
<div class="host-info" css="width: ${$host.offsetWidth}px;">...</div>
</template>
<!-- app.html (Usage of my-component) -->
<my-component>
<!-- Accessing $host from projected content (often valid) -->
<p click.trigger="$host.notify('clicked')">Click me (inside slot)</p>
</my-component>
<!-- Incorrect Usage (Example): Using $host where there's no host context -->
<!-- <template> -->
<!-- <h1>App Title - Width: ${$host.offsetWidth}</h1> -->
<!-- </template> -->// my-component.ts
import { customElement } from 'aurelia';
@customElement({
name: 'my-component',
template // from my-component.html above
})
export class MyComponent {
notify(message: string) {
console.log('Host notified:', message);
}
}Debugging Tips
Identify where the
$hostaccess occurs in your templates.Verify if that template location is within a custom element's scope (its own template or projected content).
If using slots, trace the projection from the usage point back to the component definition (
au-slotor<slot>).Consider if accessing
$hostis truly necessary or if accessing view model properties would suffice.
Last updated
Was this helpful?