Slot > if > repeat creates new elements at wrong DOM position

[zakjan]

I'm submitting a bug report

• Library Version:
  1.2.0

Please tell us about your environment:

• OS:
  all

• Browser:
  all

• Language:
  all

Current behavior:
Having a template structure such as this:

<template>
    <require from="./container"></require>
    <button click.delegate="addItems()">Add more items</button>
    <container>
        <template if.bind="true">
            <template repeat.for="item of items">
                ${item}
            </template>
        </template>
        xxx
    </container>
</template>

container.html

<template>
    <slot></slot>
</template>

New items added to the array are rendered at the bottom of the container element.

https://gist.run/?id=5c2d55c58bb270bfab2f41026898cd23
Clicking on the button produces: 1 2 3 4 xxx 5 6 7 8 9 10 11 12

Expected/desired behavior:
It should be: 1 2 3 4 5 6 7 8 9 10 11 12 xxx

[zakjan]

Note that this bug really occurs only for this specific combination of slot > if > repeat. Alternatives such as if inside repeat, dummy span inside container, dummy span inside if, they work fine.

[zakjan]

Another possibly related bug with slot > if > if https://gist.run/?id=a1b74e93a5571c627b0b7aa2e1178768

[3cp]

I encountered a similar issue without slot. I found the core issue is the back to back usage of <template> on if.bind or repeat.for.

If you change the first template to a real DOM tag div/span/...

<span if.bind="true">
  <template repeat.for="item of items">
    ${item}
  </template>
</span>

The problem goes away. The fix also works on your slot > if > if gist.

I guess the bug is in the implementation of the container-less binding (<template if.bind="true"> and <template repeat.for="item of items"> do not generate wrapper DOM element).

I sense this bug is hard to fix since the if.binding does not know how to remove/replace/add a portion of text. Maybe the container-less binding should inject something like this:

<!-- template-012 -->...<!-- /template-012 -->

as a placement mark?