AUR0708

Template compilation error: the custom element "yyyy" does not have any content other than local template(s).

Error message

Template compilation error: the custom element "{{0}}" does not have any content other than local template(s).

Parameters

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

Error explanation

This error occurs during template compilation when the main template of a custom element consists only of one or more local element definitions (<template as-custom-element="...">). A custom element's template must contain some actual content or structure besides just defining local elements.

Local elements are defined within a parent component's template, but the parent component itself must still have its own primary template content.

Common causes

• Creating a custom element template that only contains <template as-custom-element="..."> tags.

How to fix

• Add some actual content (HTML elements, text, bindings, etc.) to the main <template> of the custom element, alongside any local element definitions.

• If the intention was simply to group reusable templates, consider defining them as separate components instead of local elements within an otherwise empty parent.

Example of Incorrect Usage:

<!-- my-container.html -->
<template>
  <!-- Error: Only local element definitions, no other content -->
  <template as-custom-element="local-one">
    <div>Local One</div>
  </template>
  <template as-custom-element="local-two">
    <span>Local Two</span>
  </template>
</template>

Example of Correct Usage:

<!-- my-container.html -->
<template>
  <!-- Add some primary content for the container -->
  <h1>My Container</h1>
  <local-one></local-one>
  <hr>
  <local-two></local-two>

  <!-- Local element definitions are fine alongside other content -->
  <template as-custom-element="local-one">
    <div>Local One</div>
  </template>
  <template as-custom-element="local-two">
    <span>Local Two</span>
  </template>
</template>