Similar markup causes some randomly retained attributes

[DEfusion]

Given these 2 pieces of markup:

A

  <section>
    <div id="overlay">
      <div class="unrelated"></div>

      <div class="parent">
        <div class="child">A</div>
      </div>
    </div>
  </section>

B

  <section>
    <div id="overlay">
      <div class="unrelated"></div>

      <div class="thing" data-one="1" data-two="2" data-three="3" data-four="4" id="foo" fizz="buzz" foo="bar">B</div>
    </div>
  </section>

If I morph from A > B > A I can end up with the following result:

  <section>
    <div id="overlay">
      <div class="unrelated"></div>

      <div class="parent" data-three="3" data-one="1" id="foo">
        <div class="child">A</div>
      </div>
    </div>
  </section>

If I do the cycle again then I end up with some different attributes retained on .parent that were on .thing:

<div class="parent" data-one="1" data-two="2" fizz="buzz">

This is a simplified example from a real life use case and the issue can be replicated on this Codepen

I've tried adding an id to parent but that makes no difference.

This happens for me in FF, Chrome and Safari on OS X.

[DEfusion]

I've discovered the markup doesn't even have to be that complicated for the issue to occur, can simply be the following:

<section class="child">C</section>

<section class="thing" data-one="1" data-two="2" data-three="3" data-four="4" id="foo" fizz="buzz" foo="bar">D</section>

After 1 cycle I get:

<section class="child" data-two="2" data-three="3" id="foo">C</section>

I have updated the codepen to use these two.

[1cg]

Hi @DEfusion thank you VERY MUCH for figuring this issue out. I fixed the issue in a slightly different manner that is better for perf in https://github.com/bigskysoftware/idiomorph/commit/53ab11d5f711bcebb748f29d3eccc0944bc45858, and will cut a release today with the fix.

Really appreciate your help on this!