AUR9990

Error Message

AUR9990: Invalid @slotted usage. @slotted decorator can only be used on a field

Description

This error occurs when the @slotted decorator, used for accessing nodes projected into specific slots within a component's shadow DOM, is applied incorrectly. The decorator is designed only to be used on class properties (fields).

Cause

The direct cause is applying the @slotted decorator to something that is not a class property. Examples include:

1. Decorating a Method: Applying @slotted to a method definition.

2. Decorating a Class: Applying @slotted directly to the class declaration.

3. Decorating a Getter/Setter: Applying @slotted to an accessor property.

The decorator's implementation checks the context where it's applied and throws this error if it's not a 'field'.

Solution

Ensure that the @slotted decorator is only applied directly to a class property declaration.

Example

import { customElement, slotted } from 'aurelia';

@customElement({
  name: 'my-card',
  template: `<template shadowrootmode="open">
    <slot name="header"></slot>
    <slot></slot> <!-- Default slot -->
    <slot name="footer"></slot>
  </template>`
})
export class MyCard {

  // Correct: @slotted applied to class properties
  @slotted('header') // Matches <slot name="header">
  headerNodes: Node[];

  @slotted() // Matches the default slot <slot>
  contentNodes: Node[];

  // Incorrect: @slotted applied to a method
  // @slotted('footer')
  // getFooter() { /* ... */ }

  // Incorrect: @slotted applied to a getter
  // @slotted()
  // get defaultSlotNodes() { /* ... */ }
}

// Incorrect: Applying @slotted to the class itself
// @slotted()
// @customElement({ /* ... */ })
// export class InvalidCard { /* ... */ }

Debugging Tips

• Review the code where the @slotted decorator is used.

• Verify that the decorator is placed directly above a property declaration (e.g., headerNodes: Node[];).

• Ensure the decorator is not applied to methods, getters, setters, or the class itself.

• Confirm that the component using @slotted has Shadow DOM enabled (shadowrootmode="open" or configured via shadowOptions in the definition), as @slotted relies on the Shadow DOM projection mechanism.