# AUR0711

### **Error message**

Template compilation error: the attribute 'property' is missing in {{0:outerHTML}} in local element "{{1}}"

### **Parameters**

1. `bindableElementHTML`: The outer HTML of the `<bindable>` element that is missing the `property` attribute.
2. `localElementName`: The name of the local element (`as-custom-element` value) where the invalid `<bindable>` was found.

### Error explanation

This error occurs during template compilation when a `<bindable>` element, used to define bindable properties for a local element, does not have the required `property` attribute. The `property` attribute specifies the name of the bindable property being defined for the local element.

### Common causes

* Forgetting to add the `property` attribute to a `<bindable>` tag within a local element definition (`<template as-custom-element="...">`).
* A typo in the attribute name (e.g., `propery` instead of `property`).

### How to fix

* Add the `property="propertyName"` attribute to the `<bindable>` tag, specifying the desired name for the bindable property.

### Example of Incorrect Usage:

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

  <template as-custom-element="local-element">
    <!-- Error: Missing 'property' attribute -->
    <bindable attribute="message"></bindable>

    <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: 'property' attribute is present -->
    <bindable property="message" attribute="message"></bindable>

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