AUR0702

Template compilation error: attribute "yyyy" is invalid on element surrogate.

Error message

Template compilation error: attribute "{{0}}" is invalid on element surrogate.

Parameters

1. attribute: The name of the invalid attribute found on the surrogate <template> tag.

Error explanation

This error occurs when the template compiler finds certain disallowed attributes on the root <template> tag of a custom element definition. These attributes, including id, name, au-slot, and as-element, cannot be applied directly to the surrogate <template> itself.

Common causes

• Adding id="my-id", name="my-name", au-slot="some-slot", or as-element directly to the <template> tag of a component's HTML file.

How to fix

• Remove the disallowed attribute from the root <template> tag.

• If you need an id or other attributes on the component's host element, they should be applied where the component is used, not within its definition's <template> tag.

• au-slot is used on elements inside a component's template to project content into that component when it's used elsewhere. It doesn't belong on the root <template>.

• as-element is valid on regular markup when you want the compiler to treat an element as a specific custom element, but it cannot appear on the surrogate <template>. Move it onto the real element you want to alias, or use as-custom-element on nested <template> declarations when defining local elements.

Example of Incorrect Usage:

<!-- my-component.html -->
<template id="this-is-wrong"> <!-- Error: id is invalid on surrogate -->
  <div>Hello</div>
</template>

<template au-slot="also-wrong"> <!-- Error: au-slot is invalid on surrogate -->
  <div>World</div>
</template>

Example of Correct Usage:

<!-- my-component.html -->
<template> <!-- No invalid attributes here -->
  <div>Hello</div>
  <slot></slot> <!-- Use slot inside the template -->
</template>

<!-- Usage in another component -->
<my-component id="host-id-is-ok"> <!-- Apply id where the component is used -->
  <div au-slot> <!-- Use au-slot on the projected content -->
    Projected Content
  </div>
</my-component>