AUR0711

Template compilation error: the attribute 'property' is missing in <bindable> in local element "yyyy"

Error message

Template compilation error: the attribute 'property' is missing in {{0:outerHTML}} in local element "{{1}}"

Parameters

1. bindableElementHTML: The outer HTML of the <bindable> element that is missing the property attribute.

2. localElementName: The name of the local element (as-custom-element value) where the invalid <bindable> was found.

Error explanation

This error occurs during template compilation when a <bindable> element, used to define bindable properties for a local element, does not have the required property attribute. The property attribute specifies the name of the bindable property being defined for the local element.

Common causes

• Forgetting to add the property attribute to a <bindable> tag within a local element definition (<template as-custom-element="...">).

• A typo in the attribute name (e.g., propery instead of property).

How to fix

• Add the property="propertyName" attribute to the <bindable> tag, specifying the desired name for the bindable property.

Example of Incorrect Usage:

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

  <template as-custom-element="local-element">
    <!-- Error: Missing 'property' attribute -->
    <bindable attribute="message"></bindable>

    <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: 'property' attribute is present -->
    <bindable property="message" attribute="message"></bindable>

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