AUR0715

Template compilation error: the value of "as-custom-element" attribute cannot be empty for local element in element "yyyy"

Error message

Template compilation error: the value of "as-custom-element" attribute cannot be empty for local element in element "{{0}}"

Parameters

1. owningElementName: The name of the custom element whose template contains the invalid local element definition.

Error explanation

This error occurs during template compilation when a local element definition (<template as-custom-element="...">) has an empty value for the as-custom-element attribute. This attribute is required to provide a unique name for the local element within the scope of its parent component.

Common causes

• Using <template as-custom-element> without providing a name (e.g., <template as-custom-element>).

• Setting the attribute value to an empty string (e.g., <template as-custom-element="">).

How to fix

• Provide a valid, non-empty, unique name for the local element in the as-custom-element attribute. The name should follow custom element naming conventions (kebab-case, containing a hyphen).

Example of Incorrect Usage:

<!-- my-component.html -->
<template>
  <my-local-element></my-local-element>

  <!-- Error: as-custom-element value is empty -->
  <template as-custom-element="">
    <div>Content</div>
  </template>
</template>

Example of Correct Usage:

<!-- my-component.html -->
<template>
  <my-local-element></my-local-element>

  <!-- Correct: A valid name is provided -->
  <template as-custom-element="my-local-element">
    <div>Content</div>
  </template>
</template>