AUR0709

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

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:

<!-- 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:

<!-- 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>