# AUR0805

## Error Message

`AUR0805: Invalid scope behavior "<value>" on <au-compose />. Only "scoped" or "auto" allowed.`

Where `<value>` is the invalid value provided to the `scope-behavior` attribute.

## Description

This error occurs when using the `<au-compose>` element and providing an invalid value for the `scope-behavior` bindable attribute. This attribute controls how the binding context (scope) is passed to the composed component or template.

## Cause

The error is caused by setting the `scope-behavior` attribute on an `<au-compose>` element to a string value other than the two allowed options:

* `'auto'` (Default): The composed component inherits the outer scope (the scope of the template where `<au-compose>` is used).
* `'scoped'`: The composed component receives a new scope, with the `bindingContext` of `<au-compose>` becoming the `$parent` scope for the composed component. The `scope` property of `<au-compose>` (if provided) is used as the binding context for the composed component.

Providing any other string (e.g., `'inherit'`, `'none'`, a typo) will result in this error.

## Solution

1. **Use Valid Values:** Ensure the value provided to the `scope-behavior` attribute is either the string `'auto'` or the string `'scoped'`.
2. **Check Binding:** If `scope-behavior` is dynamically bound (e.g., `scope-behavior.bind="myScopeSetting"`), ensure the view model property (`myScopeSetting`) always resolves to either `'auto'` or `'scoped'`.
3. **Use Default:** If you want the default behavior (`'auto'`), you can simply omit the `scope-behavior` attribute.

## Example

```html
<!-- Assume 'my-component' is a registered component -->
<!-- Assume 'currentScope' and 'componentViewModel' are properties on the parent view model -->

<!-- Incorrect: 'inherit' is not a valid value -->
<au-compose component="my-component" scope-behavior="inherit"></au-compose>

<!-- Incorrect: Typo -->
<au-compose component="my-component" scope-behavior="scped"></au-compose>

<!-- Correct: Explicitly using the default 'auto' behavior -->
<au-compose component="my-component" scope-behavior="auto"></au-compose>

<!-- Correct: Using 'scoped' behavior -->
<!-- 'my-component' will have 'componentViewModel' as its binding context -->
<!-- The parent scope will be available as $parent inside 'my-component' -->
<au-compose component="my-component"
                  scope.bind="componentViewModel"
                  scope-behavior="scoped">
</au-compose>

<!-- Correct: Omitting the attribute uses the default 'auto' -->
<au-compose component="my-component" model.bind="componentViewModel"></au-compose>
```

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

@customElement({ /* ... */ })
export class ParentComponent {
  componentViewModel = { message: 'Data for composed component' };
  // Example for dynamic binding (ensure it's 'auto' or 'scoped')
  scopeSetting: 'auto' | 'scoped' = 'scoped';
}

// Composed Component View Model (my-component.ts)
import { bindable, customElement } from 'aurelia';

@customElement({ name: 'my-component', template: `<p>\${message} | Parent: \${$parent?.constructor.name}</p>` })
export class MyComponent {
  @bindable message: string;
}
```

## Debugging Tips

* Verify the spelling of the value passed to `scope-behavior` in your template. Remember it's case-sensitive.
* If the value is bound, log the value of the corresponding view model property right before `<au-compose>` renders.
* Consult the `<au-compose>` documentation for a clearer understanding of how `'auto'` and `'scoped'` behaviors affect the binding context.