function rearrangeNodes({ wrappingDialogNodeL1, contentWrapperNodeL2, contentNodeL3 }) {
  if (!(contentWrapperNodeL2.isConnected || contentNodeL3.isConnected)) {
    throw new Error(
      '[OverlayController] Could not find a render target, since the provided contentNode is not connected to the DOM. Make sure that it is connected, e.g. by doing "document.body.appendChild(contentNode)", before passing it on.',
    );
  }

  let parentElement;
  const tempMarker = document.createComment('tempMarker');

  if (contentWrapperNodeL2.isConnected) {
    // This is the case when contentWrapperNode (living in shadow dom, wrapping <slot name="my-content-outlet">) is already provided via controller.
    parentElement = contentWrapperNodeL2.parentElement || contentWrapperNodeL2.getRootNode();
    parentElement.insertBefore(tempMarker, contentWrapperNodeL2);
    // Wrap...
    wrappingDialogNodeL1.appendChild(contentWrapperNodeL2);
  }
  // if contentNodeL3.isConnected
  else {
    const contentIsProjected = contentNodeL3.assignedSlot;
    if (contentIsProjected) {
      parentElement =
        contentNodeL3.assignedSlot.parentElement || contentNodeL3.assignedSlot.getRootNode();
      parentElement.insertBefore(tempMarker, contentNodeL3.assignedSlot);
      wrappingDialogNodeL1.appendChild(contentWrapperNodeL2);
      // Important: we do not move around contentNodeL3, but the assigned slot
      contentWrapperNodeL2.appendChild(contentNodeL3.assignedSlot);
    } else {
      parentElement = contentNodeL3.parentElement || contentNodeL3.getRootNode();
      parentElement.insertBefore(tempMarker, contentNodeL3);
      wrappingDialogNodeL1.appendChild(contentWrapperNodeL2);
      contentWrapperNodeL2.appendChild(contentNodeL3);
    }
  }

  /**
   * From:
   * ```html
   * #shadow-root:
   * <div>
   *   <!-- tempMarker -->
   *   <slot name="x"/>
   * </div>
   * ```
   *
   * To:
   * ```html
   * #shadow-root:
   * <div>
   *   <!-- tempMarker -->
   *   <dialog role="none">
   *     <div id="content-wrapper-node">
   *       <slot name="x"/>
   *     </div>
   *   </dialog>
   * </div>
   * ```
   */
  parentElement.insertBefore(wrappingDialogNodeL1, tempMarker);
  parentElement?.removeChild(tempMarker);
}
From:
- wrappingDialogNodeL1: `<dialog role="none"/>`
- contentWrapperNodeL2: `<div id="content-wrapper-node"/>`
- contentNodeL3: `<div slot="my-content"/>`
To:
```html
<dialog role="none">
  <div id="content-wrapper-node">
    <!-- this was the (slot for) original content node -->
    <slot name="my-content"></slot>
  </div>
</dialog>
```

`<slot name="my-content">` belonging to `<div slot="content"/>` will be wrapped with wrappingDialogNodeL1 and contentWrapperNodeL2
inside shadow dom. With the help of temp markers, `<slot name="my-content">`'s original position will be respected.

@param {{ wrappingDialogNodeL1:HTMLDialogElement|HTMLDivElement; contentWrapperNodeL2:Element; contentNodeL3: Element }} opts