In Aurelia I have created a custom element who interacts as a container. This container creates some ui elements around the child nodes.
These custom elements can be used in any view as follow:
<wizard-container ref="container">
<wizard-step title="Step 1" view-model="step1"></wizard-step>
<wizard-step title="Step 2" view-model="step2"></wizard-step>
<wizard-step title="Step 3" view-model="step3"></wizard-step>
</wizard-container>
In the wizard-container class I read all children like this @children('wizard-step') steps = []; and loop over them in the template:
...
<div class="step" repeat.for="step of steps">
<slot name="step-${$index}"><p>slot-${$index}</p></slot>
</div>
...
The Problem is that the slots are not going to be created.
I'm also not able to add any element to these slots like this
<template slot="slot-${idx}">
<p>hello world</p>
</template>
According to this blog post from May 2016 data binding to slot's name attribute and to the slot attribute is not working.
Does someone knows if it is now possible or has any idea for a workaround?
This is not possible with slots, unfortunately. It isn't likely that it will be possible due to limitations of the Shadow DOM spec.
You might look at replaceable parts to see if it can do what you need to do: https://aurelia.io/docs/fundamentals/cheat-sheet#custom-elements
Scroll down a bit and you'll see some information on replaceable parts. That being said, I'm not sure if this will work for you. I've never tried using dynamically named template parts.