# AUR0712

### **Error message**

Template compilation error: Bindable property and attribute needs to be unique; found property: {{0}}, attribute: {{1}}

### **Parameters**

1. `propertyName`: The name specified in the `property` attribute of the `<bindable>` tag.
2. `attributeName`: The name specified in the `attribute` attribute of the `<bindable>` tag (or `undefined` if not specified).

### Error explanation

This error occurs during template compilation when defining bindable properties for a local element using the `<bindable>` tag. It indicates that either the specified `property` name or the specified `attribute` name (if provided) has already been used by another `<bindable>` tag within the *same* local element definition (`<template as-custom-element="...">`). Both property names and attribute names must be unique for a single local element.

### Common causes

* Defining two `<bindable>` tags with the same `property` attribute value within the same `<template as-custom-element="...">`.
* Defining two `<bindable>` tags with the same `attribute` attribute value within the same `<template as-custom-element="...">`.

### How to fix

* Review the `<bindable>` tags within the specified local element definition.
* Ensure that each `property` attribute value is unique across all `<bindable>` tags for that local element.
* Ensure that each `attribute` attribute value (if specified) is unique across all `<bindable>` tags for that local element.
* Rename or remove the duplicate property or attribute definition.

### Example of Incorrect Usage:

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

  <template as-custom-element="local-element">
    <!-- Error: Duplicate property name "message" -->
    <bindable property="message"></bindable>
    <bindable property="message"></bindable>

    <!-- Error: Duplicate attribute name "data-attr" -->
    <bindable property="data1" attribute="data-attr"></bindable>
    <bindable property="data2" attribute="data-attr"></bindable>

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

### Example of Correct Usage:

```html
<!-- my-component.html -->
<template>
  <local-element message="Hi" data-value="Test"></local-element>

  <template as-custom-element="local-element">
    <!-- Correct: Unique property and attribute names -->
    <bindable property="message"></bindable>
    <bindable property="dataValue" attribute="data-value"></bindable>

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