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-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
was a v1 feature and is not used in v2. Useas-custom-element
on 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?