Dump contents of an HtmlModule in Grove outside of its container

self-injecting-module.html

<!-- Dumping the contents of an HTML Module may be useful when prototyping certain changes -->
<!-- In this demo, we include HTML, CSS, and JavaScript in a modular format -->

<div data-dump="subhead-demos">
  <h2 class="subhead subhead-A">Custom Subhead Styles A</h2>
  <p>“Of course, we knew it wasn’t going to be something that was going to solve the situation at the border at that time, but we were touched by that,” said Otero Prada, a Colombian painter who has lived in St. Louis for 17 years.</p>
  <p>The women, all visual artists, decided to create a mural project to spark conversations about the shared African experience in the Americas.</p>

  <h2 class="subhead subhead-B">Custom Subhead Styles B</h2>
  <p>“Of course, we knew it wasn’t going to be something that was going to solve the situation at the border at that time, but we were touched by that,” said Otero Prada, a Colombian painter who has lived in St. Louis for 17 years.</p>
  <p>The women, all visual artists, decided to create a mural project to spark conversations about the shared African experience in the Americas.</p>

  <h2 class="subhead subhead-C">Custom Subhead Styles C</h2>
  <p>“Of course, we knew it wasn’t going to be something that was going to solve the situation at the border at that time, but we were touched by that,” said Otero Prada, a Colombian painter who has lived in St. Louis for 17 years.</p>
  <p>The women, all visual artists, decided to create a mural project to spark conversations about the shared African experience in the Americas.</p>
</div>

<style>
.subhead {
  margin-bottom: 0.59em; /* 1/2 of <p> margin */
}

.subhead-A {
  font-size: 1.625em !important;
  font-weight: normal !important;
  margin-top: 1.375em;
  margin-bottom: 0.375em;
}

.subhead-B {
  border-top: 1px dashed #35353b;
  border-top: 1px dashed var(--secondaryColor1);
  font-size: 1.35em !important;
  margin-top: 0.25em;
  padding-top: 0.75em !important;
}

.subhead-C {
  font-style: italic !important;
  font-weight: normal !important;
  margin-top: 1.3em;
}
</style>

<script>
function dumpHTML (identifier) {
  var content = document.querySelector('[data-dump="' + identifier + '"]')
  if (!content) {
    console.error("Could not find an element matching identifier " + identifier)
    return
  }

  var embed = (
    content.closest('.Enhancement')
    || content.closest('.HtmlModule')
    || content.parentElement
  )
  if (!embed) {
    console.error("Could not find a valid parent")
    console.log(identifier, content)
    return
  }

  embed.insertAdjacentHTML('beforebegin', content.innerHTML)
  content.remove()  
}

dumpHTML("subhead-demos")
</script>