AUR0701

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

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:

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

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