The element instance is not working as expected in nested custom elements

vNext
1

We have implemented the component using nested custom elements. We are populating the data based on these custom elements and finally initializing a javascript plugin using these data. Now the plugin initialization fails due to the element reference. When we remove the child elements, it’s working as expected. There is no view(.html) for the custom elements. Please provide a solution.

custom element usage

<parent-element foo.bind="foo">
    <child-element foo1.bind="foo1"></child-element>
    <child-element foo1.bind="foo2"></child-element>
</parent-element>

parent-element.ts

import { customElement, children, inject } from ‘aurelia’;

@customElement(parent-element)
@inject(Element)
public class ParentElement {
@children({ property: child-element }) childElements: any[] = [];
element: any;
constructor(element) {
this.element = element;
}
afterAttach() {
$(this.element).plugin({});
}
}

child-element.ts

import { customElement, inject } from 'aurelia';

@customElement(`child-element`)
@inject(Element)
public class ChildElement {
    
}
1 Like
2

The example code looks simple, so im quite confident it should work without issues. Though it would be good if you could help give a reproduction of the issue at https://gist.dumber.app
It will make it easier to work out the error.

1 Like