AUR0702
Template compilation error: attribute "yyyy" is invalid on element surrogate.
Error message
Template compilation error: attribute "{{0}}" is invalid on element surrogate.
Parameters
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", oras-elementdirectly 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
idor 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-slotis 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-elementwas a v1 feature and is not used in v2. Useas-custom-elementon nested templates for local elements instead.
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>Last updated
Was this helpful?