# AUR0703

### **Error message**

Template compilation error: template controller "{{0}}" is invalid on element surrogate.

### **Parameters**

1. `attribute`: The name of the template controller attribute found on the surrogate `<template>` tag.

### Error explanation

This error occurs when the template compiler finds a template controller attribute (e.g., `if`, `repeat.for`, `with`, `au-compose`, `portal`) directly on the root `<template>` tag of a custom element definition. Template controllers are designed to control the rendering of the elements *within* a template, not the template itself.

### Common causes

* Adding attributes like `if.bind="condition"`, `repeat.for="item of items"`, `with.bind="object"`, etc., to the main `<template>` tag of a component's HTML file.

### How to fix

* Remove the template controller attribute from the root `<template>` tag.
* Apply template controllers to elements *inside* the `<template>` tag if you want to conditionally render or repeat the content of the component.
* If you want to conditionally render the *entire* component, apply the template controller where the component is *used*, not within its definition.

### Example of Incorrect Usage:

```html
<!-- my-component.html -->
<!-- Error: "if.bind" is invalid on the root template -->
<template if.bind="someCondition">
  <div>Hello</div>
</template>

<!-- Error: "repeat.for" is invalid on the root template -->
<template repeat.for="item of items">
  <div>${item}</div>
</template>
```

### Example of Correct Usage:

```html
<!-- my-component.html -->
<template>
  <!-- Apply template controllers to elements inside -->
  <div if.bind="someCondition">Hello</div>
  <div repeat.for="item of items">${item}</div>
</template>

<!-- Usage in another component -->
<!-- Apply template controller where the component is used -->
<my-component if.bind="shouldShowComponent"></my-component>
```