# AUR0701

### **Error message**

Template compilation error in element "{{0:name}}": the root `<template>` cannot be a local element template.

### **Parameters**

1. `name`: The name of the custom element being compiled.

### Error explanation

This error occurs when the template compiler encounters the `as-custom-element` attribute on the root `<template>` tag of a custom element's definition. The `as-custom-element` attribute is used to define local elements (elements defined within another element's template), and it cannot be applied to the main template of a custom element.

### Common causes

* Adding `as-custom-element="some-name"` to the main `<template>` tag of a component's HTML file.

### How to fix

* Remove the `as-custom-element` attribute from the root `<template>` tag of your component's template.
* If you intend to define a local element, ensure the `<template as-custom-element="...">` tag is nested inside the main `<template>` tag of the parent component.

### Example of Incorrect Usage:

```html
<!-- my-component.html -->
<template as-custom-element="this-is-wrong"> <!-- Error: as-custom-element on root template -->
  <div>Hello</div>
</template>
```

### Example of Correct Usage (Local Element):

```html
<!-- parent-component.html -->
<template>
  <div>Parent Content</div>

  <!-- Define a local element -->
  <template as-custom-element="local-element">
    <div>This is the local element content</div>
  </template>

  <!-- Use the local element -->
  <local-element></local-element>
</template>
```