# AUR0709

### **Error message**

Template compilation error: local element template needs to be defined directly under root of element "{{0}}".

### **Parameters**

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

### Error explanation

This error occurs during template compilation when a local element definition (`<template as-custom-element="...">`) is found nested inside another element within the main template, rather than being a direct child of the root `<template>` element. Local elements must be defined at the top level of the parent component's template content.

### Common causes

* Placing a `<template as-custom-element="...">` tag inside a `<div>`, `<span>`, or any other element within the main `<template>`.

### How to fix

* Move the `<template as-custom-element="...">` tag so that it is a direct child of the root `<template>` element of the parent component.

### Example of Incorrect Usage:

```html
<!-- my-component.html -->
<template>
  <div>
    <!-- Error: Local element definition is nested inside a div -->
    <template as-custom-element="local-one">
      <span>Content for local-one</span>
    </template>
  </div>
  <local-one></local-one>
</template>
```

### Example of Correct Usage:

```html
<!-- my-component.html -->
<template>
  <div>
    <!-- Use the local element here -->
    <local-one></local-one>
  </div>

  <!-- Define the local element as a direct child of the root template -->
  <template as-custom-element="local-one">
    <span>Content for local-one</span>
  </template>
</template>
```