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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aurelia.io/developer-guides/error-messages/runtime-html/aur0105.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.