Acquia Lift Experience Builder: Removing dual wrappers when replacing content with CSS selector

lift-listener.js

window.addEventListener('acquiaLiftContentAvailable', function(event) {
  function unwrap(wrapper) {
    // place childNodes in document fragment
    var docFrag = document.createDocumentFragment();
    while (wrapper.firstChild) {
      var child = wrapper.removeChild(wrapper.firstChild);
      docFrag.appendChild(child);
    }

    // replace wrapper with document fragment
    wrapper.parentNode.replaceChild(docFrag, wrapper);
  }

  console.log(event)
  var t0 = performance.now();
  // Array to keep Rule IDs we need to manipulate the same way.
  var slot_rules = ["3958c2a0-d3c0-11e8-a2d3-0da97c805bbe"];

  // Only run the script if the rule is matched.
  if (slot_rules.includes(event.detail.decision_rule_id)) {

    // Process decisions.
    var slotId = event.detail.decision_slot_id;
    var slotElement = document.querySelector("[data-lift-slot='" + slotId + "'");

    // Check if slot exists.
    if (!slotElement) {
      console.warn('Decision on slot "' + slotId + '" has HTML, but slot is not on the page.');
      return;
    }

   // Basically, remove the dual wrapper.
   if (slotElement.hasChildNodes()) {
    // Set the new content to the target element's innerHTML.
    // slotElement.innerHTML = slotElement.children[0].innerHTML;
    unwrap(slotElement);
  }
}
var t1 = performance.now();
console.log("Content swapper took: " + (t1 - t0) + " ms");
});

The problem this is solving is when you are using the CSS selector as the slot identifier, and want to replace the content with the same content type (say, replacing a blog post with another blog post), you end up with double wrappers which can cause styling issues.

What happens is instead of replacing the selector with the content, you end up with only the content being replaced, so you put an entire entity wrapper inside the wrapper of an entity.