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
localElementName: The name of the local element being defined (as-custom-elementvalue).
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>Last updated
Was this helpful?