const main = document.querySelector('main');
const arr = "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium, eaque!".split(' ');
for (let i = 0; i < arr.length; i++) {
  const div = document.createElement('span');
  const shadowRoot = div.attachShadow({
    mode: 'open'
  });
  shadowRoot.appendChild(document.createTextNode(arr[i] + " "));
  main.appendChild(div);
}

const spans = [...document.querySelectorAll('.span-has-shadow')];
for (let i = 0; i < spans.length; i++) {
  const span = spans[i];
  const text = span.dataset.text;
  const root = span.attachShadow({
    mode: 'open'
  });
  root.appendChild(document.createTextNode(text + " "));
  if (i > 0) {
    const prev = spans[i - 1];
    prev.shadowRoot.appendChild(span);
  }
}

main>* {
  font-size: 1.5em;
  font-family: cursive;
}

main {
  margin: auto;
  width: 1000px;
}

#shadow-root {
  color: blue;
  margin-top: 1em;
}

h2 {
  text-align: center;
}

  <main></main>

  <h2>
    <span class="span-has-shadow" data-text="lorem">
      <span class="span-has-shadow" data-text="ipsum">
        <span class="span-has-shadow" data-text="dolor">
          <span class="span-has-shadow" data-text="sit">
            <span class="span-has-shadow" data-text="amet">
              <span class="span-has-shadow" data-text="consectetur">
                <span class="span-has-shadow" data-text="adipiscing">
                  <span class="span-has-shadow" data-text="elit">
                  </span>
                </span>
              </span>
            </span>
          </span>
        </span>
      </span>
    </span>
  </h2>