# AUR0811

## Error Message

`AUR0811: Invalid portal strict target query, empty query.`

## Description

This error occurs when using the `portal` custom attribute in `strict` mode (e.g., `portal="strict: <selector>"` or `portal.strict="<selector>"`) and the provided CSS selector used to find the target element is an empty string or contains only whitespace.

## Cause

The direct cause is providing an empty or whitespace-only query string to the `portal` attribute when using the `strict:` prefix or the `.strict` binding mode. The `strict` mode requires a valid CSS selector to precisely identify the target element where the portal content should be rendered.

Example causes:

* `portal="strict:"`
* `portal="strict: "`
* `portal.strict=""`
* `portal.strict.bind="someProperty"` where `someProperty` evaluates to an empty string.

## Solution

Ensure that when using the `strict` mode for the `portal` attribute, you provide a valid, non-empty CSS selector that uniquely identifies the target element in the DOM.

1. **Provide a Selector:** Add a valid CSS selector after `strict:`.
2. **Check Bound Property:** If binding the selector (e.g., `portal.strict.bind="targetSelector"`), ensure the view model property (`targetSelector` in this case) holds a valid, non-empty CSS selector string.
3. **Remove Strict Mode:** If strict targeting isn't required, remove the `strict:` prefix or use a different binding mode (`portal="target:<selector>"` or `portal.bind="targetElement"`).

## Example

```html
<!-- Incorrect: Empty query in strict mode -->
<div portal="strict:">Portal Content</div>

<!-- Incorrect: Bound property is empty -->
<template>
  <div portal.strict.bind="emptySelector">Portal Content</div>
</template>

<!-- Correct: Valid selector provided -->
<div portal="strict: #my-portal-target">Portal Content</div>

<!-- Correct: Bound property has a valid selector -->
<template>
  <div portal.strict.bind="portalTargetSelector">Portal Content</div>
</template>

<!-- Target element elsewhere in the DOM -->
<div id="my-portal-target"></div>
```

```typescript
// View Model Example
import { customElement } from 'aurelia';

@customElement({ /* ... */ })
export class MyComponent {
  // Incorrect setup for the binding example above
  emptySelector = '';

  // Correct setup for the binding example above
  portalTargetSelector = '#my-portal-target';
}
```

## Debugging Tips

* Inspect the value of the `portal` attribute in the DOM where the error occurs.
* If the selector is bound, check the value of the corresponding view model property at runtime using `console.log` or debugger tools.
* Ensure the selector provided is a valid CSS selector recognized by `document.querySelector`.
* Verify that the `strict:` prefix is correctly formatted if used.

```
```


---

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