AUR0710

Template compilation error: bindable properties of local element "yyyy" template needs to be defined directly under <template>.

Error message

Template compilation error: bindable properties of local element "{{0}}" template needs to be defined directly under <template>.

Parameters

1. localElementName: The name of the local element being defined (as-custom-element value).

Error explanation

This error occurs during template compilation when a <bindable> element, used to define bindable properties for a local element, is found nested inside another element within the local element's <template as-custom-element="...">. Bindable definitions for local elements must be direct children of the <template> tag that defines the local element.

Common causes

• Placing a <bindable property="..."> tag inside a <div>, <span>, or any other element within the <template as-custom-element="...">.

How to fix

• Move the <bindable> tag(s) so that they are direct children of the <template as-custom-element="..."> tag.

Example of Incorrect Usage:

<!-- my-component.html -->
<template>
  <local-element message="Hello"></local-element>

  <template as-custom-element="local-element">
    <div>
      <!-- Error: <bindable> is nested inside a div -->
      <bindable property="message"></bindable>
    </div>
    <span>${message}</span>
  </template>
</template>

Example of Correct Usage:

<!-- my-component.html -->
<template>
  <local-element message="Hello"></local-element>

  <template as-custom-element="local-element">
    <!-- Correct: <bindable> is a direct child of the template -->
    <bindable property="message"></bindable>

    <div>
      <span>${message}</span>
    </div>
  </template>
</template>