# AUR0706

### **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:

```html
<!-- 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:

```html
<!-- 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>
```