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

```
```