# AUR0702

### **Error message**

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

### **Parameters**

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

### Error explanation

This error occurs when the template compiler finds certain disallowed attributes on the root `<template>` tag of a custom element definition. These attributes, including `id`, `name`, `au-slot`, and `as-element`, cannot be applied directly to the surrogate `<template>` itself.

### Common causes

* Adding `id="my-id"`, `name="my-name"`, `au-slot="some-slot"`, or `as-element` directly to the `<template>` tag of a component's HTML file.

### How to fix

* Remove the disallowed attribute from the root `<template>` tag.
* If you need an `id` or other attributes on the component's host element, they should be applied where the component is used, not within its definition's `<template>` tag.
* `au-slot` is used on elements *inside* a component's template to project content *into* that component when it's used elsewhere. It doesn't belong on the root `<template>`.
* `as-element` is valid on regular markup when you want the compiler to treat an element as a specific custom element, but it cannot appear on the surrogate `<template>`. Move it onto the real element you want to alias, or use `as-custom-element` on nested `<template>` declarations when defining local elements.

### Example of Incorrect Usage:

```html
<!-- my-component.html -->
<template id="this-is-wrong"> <!-- Error: id is invalid on surrogate -->
  <div>Hello</div>
</template>

<template au-slot="also-wrong"> <!-- Error: au-slot is invalid on surrogate -->
  <div>World</div>
</template>
```

### Example of Correct Usage:

```html
<!-- my-component.html -->
<template> <!-- No invalid attributes here -->
  <div>Hello</div>
  <slot></slot> <!-- Use slot inside the template -->
</template>

<!-- Usage in another component -->
<my-component id="host-id-is-ok"> <!-- Apply id where the component is used -->
  <div au-slot> <!-- Use au-slot on the projected content -->
    Projected Content
  </div>
</my-component>
```