DOM order not respecting facet order in a Lightning Component

Question

I have a Lightning Component that allows additional rows to be added in between existing rows. The rows are represented by a facet:

<aura:attribute name="payments" type="Aura.Component[]"/>

and the helper code that adds a row is:

var index = ...;
$A.createComponent("c:payment", {...}, function(newComponent, status, error) {
    if (status === "SUCCESS") {
        var rows = component.get("v.payments");
        rows.splice(index, 0, newComponent);
        component.set("v.payments", rows);
    } else {
         ...
    }
}

I've added JavaScript debugging output to confirm that the rows array is being modified as I expect and debug markup to confirm the DOM order which is not consistent. The inconsistency is repeatable with the new rows appearing at about half as many rows down as I would expect from the index; I wonder if the logic that finds the DOM insertion point for the new DOM elements is getting it wrong.

What's causing this behavior? How can I fix it?

PS

In this failing case c:payment creates a <tr> inside a <tbody>. I have similar code creating a <div> inside a <div class="slds-grid"> that doesn't have this problem.

PPS

Changed to using <div> and that didn't help.

Answer 1

Found the cause of the problem.

The c:payment component had this markup:

<aura:component>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <c:service aura:id="service"/>
</aura:component>

and changing to this markup fixed the problem:

<aura:component>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <c:service aura:id="service"/>
    </tr>
</aura:component>

The c:service component follows the "Creating Data Services" pattern described in Modularizing Code in Lightning Components so nominally does not contribute to the DOM as it only contains aura:method declarations. But its location is significant in this case.

Having wasted a lot of hours on this, a rule I will follow in future is to make sure all components have a single element at their root that contains all the HTML and all other referenced components.