AUR0762-0763

Error Message

AUR0762: Trying to retrieve a custom element controller from a node, but the provided node <<nodeName> /> is not a custom element or containerless host.

AUR0763: Trying to retrieve a custom element controller from a node, but the provided node <<nodeName> /> is not a custom element or containerless host.

Where <nodeName> is the tag name (or #comment for comment nodes) of the DOM node provided.

Description

These errors occur when calling CustomElement.for(node) (or an API that uses it internally) with a DOM node that is not recognized by Aurelia as the host element of a custom element instance. Aurelia associates controller instances with specific host nodes (either the element itself or a special comment node for containerless elements). If the provided node doesn't have this association, the controller cannot be retrieved.

Cause

This typically happens when:

1. Incorrect Node: You are calling CustomElement.for() with a standard HTML element (e.g., a <div>, <p>) or an element that looks like a custom element but hasn't been properly initialized or managed by Aurelia.

2. Node Outside Aurelia Context: The node exists in the DOM but was not rendered or managed by the Aurelia application instance you are querying from.

3. Querying Inner Element: You are targeting an element inside a custom element's template instead of the custom element's host node itself.

4. Timing Issues: Attempting to get the controller for a node that hasn't been fully processed and attached by Aurelia yet.

5. Containerless Elements: For containerless elements, you must target the specific comment node Aurelia uses as the host marker, not other nodes that were part of the original template.

Solution

1. Target the Correct Node: Ensure the node variable passed to CustomElement.for() references the actual host element of the Aurelia custom element you are interested in.

   • For regular custom elements like <my-component>, target the <my-component> element itself.

   • For containerless elements (@customElement({ containerless: true, ... })), you need to find the specific comment node Aurelia leaves behind as the host. This is often harder to target directly and might require alternative approaches like accessing the controller via dependency injection or parent/child relationships.

2. Verify Aurelia Management: Make sure the element is part of the Aurelia application's rendered DOM and not an element added manually outside of Aurelia's control (or added in a way that bypasses Aurelia's rendering lifecycle).

3. Use closest() Carefully: If using methods like element.closest('my-component'), ensure it actually resolves to the host element and not null or an unexpected parent.

4. Ensure Attachment: If dealing with dynamically added elements or timing issues, ensure the element is fully attached and processed by Aurelia before attempting to retrieve its controller. Use appropriate lifecycle hooks (attached) or await relevant promises.

Example

<!-- my-app.html -->
<template>
  <div ref="standardDiv">Just a div</div>
  <my-component ref="myComponentHost"></my-component>
</template>

<!-- my-component.html -->
<template>
  <p ref="innerParagraph">Inside my component</p>
</template>

import { CustomElement, customElement, IPlatform } from 'aurelia';

@customElement({ name: 'my-component', template: '<p ref="innerParagraph">Inside my component</p>' })
class MyComponent {
  innerParagraph: HTMLElement;
}

@customElement({ name: 'my-app', template: '<div ref="standardDiv">Just a div</div><my-component ref="myComponentHost"></my-component>' })
class MyApp {
  standardDiv: HTMLElement;
  myComponentHost: HTMLElement; // This is the host element for MyComponent

  constructor(private platform: IPlatform) {}

  attached() {
    this.platform.domWriteQueue.queueTask(() => {
      // Correct: Get controller for the custom element host
      const myComponentController = CustomElement.for(this.myComponentHost);
      console.log('MyComponent Controller:', myComponentController);

      // Incorrect: Trying to get controller for a standard div
      try {
        const divController = CustomElement.for(this.standardDiv); // Throws AUR0762/AUR0763
      } catch (e) {
        console.error('Error getting controller for div:', e);
      }

      // Incorrect: Trying to get controller for an element *inside* the component's template
      const myComponentInstance = myComponentController.viewModel as MyComponent;
      try {
        const pController = CustomElement.for(myComponentInstance.innerParagraph); // Throws AUR0762/AUR0763
      } catch (e) {
        console.error('Error getting controller for inner paragraph:', e);
      }
    });
  }
}

Debugging Tips

• Inspect the node being passed to CustomElement.for() in the debugger. Check its nodeName, attributes, and parent elements.

• Verify that the node has an au-resource-controllers property attached (this is an internal detail but indicates Aurelia manages it).

• Ensure the element's tag name corresponds to a registered custom element.

• If working with containerless elements, try alternative ways to access the desired view model/controller (e.g., via @children query in a parent, dependency injection).