patrick-steele-idem / morphdom

Fast and lightweight DOM diffing/patching (no virtual DOM needed)
MIT License
3.18k stars 127 forks source link

skip diffing a node, but then continue diffing its children? #211

Closed akbr closed 3 years ago

akbr commented 3 years ago

Thanks for this great library!

I'd like to skip diffing a node, but then continue diffing its children, in the midst of an ongoing morph operation. For example:

//from
<div>
  <div id="skip" style="color: green;">
    <div>1</div>
  </div>
</div>

//to
<div>
  <div id="skip" style="color: red;">
    <div>2</div>
    <div>3</div>
  </div>
</div>

//result
<div>
  <div id="skip" style="color: green;">
    <div>2</div>
    <div>3</div>
  </div>
</div>

I can get it done like this, which is pretty hacky:

  morph(fromEl, toEl, {
    onBeforeElUpdated: function (fromEl, toEl) {
      if (fromEl.id === "skip" && toEl.id === "skip") {
        // hah!
        morphAttrs(toEl, fromEl);
        return true;
      }
    }
  });

Am I missing a better way?