AUR0706

Template compilation error: detected projection with [au-slot="yyyy"] attempted on a non custom element zzzz.

Error message

Template compilation error: detected projection with [au-slot="{{0}}"] attempted on a non custom element {{1}}.

Parameters

1. slotName: The value of the au-slot attribute.

2. elementName: The name of the element where the au-slot was found.

Error explanation

This error occurs when the template compiler encounters an au-slot attribute on an element that is being used within a template that does not belong to a custom element. The au-slot attribute is used to specify which named slot within a custom element the content should be projected into. It has no meaning when used inside a regular HTML element's template or a template that is not associated with a custom element definition.

Common causes

• Adding au-slot="some-slot" to an element inside a template that is not the template for a custom element.

• Trying to use slot projection logic outside the context of a parent custom element.

How to fix

• Ensure that the au-slot attribute is only used on elements that are direct children (or nested within children) of a custom element usage.

• The parent element where the content containing au-slot is placed must be a custom element that defines <slot> elements in its own template.

Example of Incorrect Usage:

<!-- plain-template.html (Not a custom element template) -->
<template>
  <div>
    <!-- Error: Cannot use au-slot here because the parent template is not a custom element -->
    <span au-slot="header">This won't work</span>
  </div>
</template>

Example of Correct Usage:

<!-- my-card.html (Custom Element Template) -->
<template>
  <div class="card">
    <div class="card-header">
      <slot name="header">Default Header</slot> <!-- Slot defined -->
    </div>
    <div class="card-body">
      <slot>Default Body</slot> <!-- Default slot defined -->
    </div>
  </div>
</template>

<!-- usage.html -->
<template>
  <require from="./my-card"></require>

  <my-card>
    <!-- Correct: Projecting into the 'header' slot of my-card -->
    <span au-slot="header">Card Title</span>

    <!-- Correct: Projecting into the default slot of my-card -->
    <p>This is the card body content.</p>
  </my-card>
</template>