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:

1. Incorrect Usage Context: $host is 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.

2. Missing au-slot Attribute (Potential Hint): The error message hints at [au-slot]. While $host isn't directly tied only to au-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 $host from content not projected via au-slot might fail to find the context.

3. Internal Evaluation Issues: In rarer cases, an internal Aurelia issue or an unusual component composition scenario might prevent the $host context from being correctly propagated.

Solution

1. Verify Usage Context: Ensure $host is 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-slot or native <slot>). Avoid using $host in contexts where there is no clear custom element host (like the root application template).

2. Check Slot Setup: If using $host within projected content, double-check your slot implementation (au-slot attributes on the content, corresponding <slot> elements or au-slot processing in the component's template).

3. 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 @ref in specific scenarios, although $host specifically 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 $host access 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-slot or <slot>).

• Consider if accessing $host is truly necessary or if accessing view model properties would suffice.