# 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

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

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