# AUR0710

### **Error message**

Template compilation error: bindable properties of local element "{{0}}" template needs to be defined directly under `<template>`.

### **Parameters**

1. `localElementName`: The name of the local element being defined (`as-custom-element` value).

### Error explanation

This error occurs during template compilation when a `<bindable>` element, used to define bindable properties for a local element, is found nested inside another element within the local element's `<template as-custom-element="...">`. Bindable definitions for local elements must be direct children of the `<template>` tag that defines the local element.

### Common causes

* Placing a `<bindable property="...">` tag inside a `<div>`, `<span>`, or any other element within the `<template as-custom-element="...">`.

### How to fix

* Move the `<bindable>` tag(s) so that they are direct children of the `<template as-custom-element="...">` tag.

### Example of Incorrect Usage:

```html
<!-- my-component.html -->
<template>
  <local-element message="Hello"></local-element>

  <template as-custom-element="local-element">
    <div>
      <!-- Error: <bindable> is nested inside a div -->
      <bindable property="message"></bindable>
    </div>
    <span>${message}</span>
  </template>
</template>
```

### Example of Correct Usage:

```html
<!-- my-component.html -->
<template>
  <local-element message="Hello"></local-element>

  <template as-custom-element="local-element">
    <!-- Correct: <bindable> is a direct child of the template -->
    <bindable property="message"></bindable>

    <div>
      <span>${message}</span>
    </div>
  </template>
</template>
```