Target element not being re-evaluated while the DOM is still being built

[Esger]

I'm submitting a bug report

• Framework Version:
  1 - Aurelia CLI 3.0.1

• Operating System:
  OSX 14.4.1

• Node Version:
  18.17.1

• NPM Version:
  9.6.7

• Browser:
  all | Chrome XX

• Language:
  ESNext

Current behavior:
Using the portal attribute, like portal="target.bind: isMobile ? '.bncHeader' : '.bncOptionsWrapper'" puts the element with this attribute at the end of the body if the intended target element isn't rendered yet. Otherwise it works fine.
I can work around this problem by binding the to-be-portalled element later, when the target element is available in the DOM but this is not ideal.

Expected/desired behavior:
The target portal element should be re-evaluated while the DOM is still being rendered.

What is the motivation / use case for changing the behavior?
For a hybrid application for desktop / mobile some elements need to be portalled to somewhere else on mobile.

[bigopon]

Thanks @Esger , it doesnt seem like a straight forward task with "while the dom still rendering". We can try to wait for the task queue probably, do you want to have a PR for this?

[Esger]

@bigopon Waiting for the task queue might be a better idea indeed. Our application makes several calls to the back end before everything is rendered.
Maybe the Mutation Observer API can be useful. https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver (observe the whole document to check if the target appears)
A PR for me isn't very useful I'm afraid :) although I am curious about the solution.