Injecting Element do not work with @templateController

[euglv]

I'm submitting a bug report

• Library Version: 1.4.1

Please tell us about your environment:

• Operating System: Windows 11

• Node Version: 18.17.0

• NPM Version: 10.9.0

• Aurelia CLI OR JSPM OR Webpack AND Version CLI 3.0.3 | webpack 5.95.0

• Browser: Chrome 131

• Language: ESNext

Current behavior:

@templateController

and

@inject(Element)

do not work together for custom attribute. <!--anchor--> Coment element is passed to constructor instead of actual DOM element:

@templateController
@inject(BoundViewFactory, ViewSlot, Element)
export class RedBoxCustomAttribute {
  constructor(factory, slot, element) {
    this.factory = factory;
    this.slot = slot;
    this.element = element;
    console.log(element) // <!--anchor--> is logged to console
  }

https://gist.run/?id=6a2ce66ed37b552dcfd2614d76cbe8fa&sha=531b9a54616b6b872e3e7d0eb498d6e8af00487a

• What is the motivation / use case for changing the behavior? There should be the way to access DOM element and extend child context using custom attribute.

[euglv]

https://gist.run/?id=6a2ce66ed37b552dcfd2614d76cbe8fa&sha=531b9a54616b6b872e3e7d0eb498d6e8af00487a

I have figured out that BoundViewFactory is responsible for creating DOM elements. In my example I can store element in the end of bind method:

  bind(bindingContext, overrideContext) {
    let newContext = { };
    overrideContext = createOverrideContext(newContext, overrideContext);
    if (!this.view) {
      this.view = this.factory.create();
      this.view.bind(newContext, overrideContext);
      this.slot.add(this.view);
    } else {
      this.view.bind(newContext, overrideContext);
    }
    this.element = this.view.firstChild;
  }

[euglv]

this.element = this.view.firstChild;

This is not correct way to store DOM element reference in template controller custom attribute. If custom attribute is used together with repeat.for it can refer several DOM nodes. To cover all cases template controller should store array of DOM elements:

bind(bindingContext, overrideContext) {
    let newContext = { };
    overrideContext = createOverrideContext(newContext, overrideContext);
    if (!this.view) {
      this.view = this.factory.create();
      this.view.bind(newContext, overrideContext);
      this.slot.add(this.view);
    } else {
      this.view.bind(newContext, overrideContext);
    }
    const elements = [];
    let element = view.firstChild;
    if (element instanceof Element)
      elements.push(element);
    while (element && element != view.lastChild) {
      element = element.nextElementSibling;
      if (element)
        elements.push(element);
     }
     this.elements = elements;
  }