__initContentDomStructure() {
    const wrappingDialogElement = document.createElement(
      this.config?._noDialogEl ? 'div' : 'dialog',
    );
    // We use a dialog for its visual capabilities: it renders to the top layer.
    // A11y will depend on the type of overlay and is arranged on contentNode level.
    // Also see: https://www.scottohara.me/blog/2019/03/05/open-dialog.html
    //
    // The role="dialog" is set on the contentNode (or another role), so role="none"
    // is valid here, although AXE complains about this setup.
    // For now we need to add `ignoredRules: ['aria-allowed-role']` in your AXE tests.
    // see: https://lion.js.org/fundamentals/systems/overlays/rationale/#considerations
    wrappingDialogElement.setAttribute('role', 'none');
    wrappingDialogElement.setAttribute('data-overlay-outer-wrapper', '');
    // N.B. position: fixed is needed to escape out of 'overflow: hidden'
    // We give a high z-index for non-modal dialogs, so that we at least win from all siblings of our
    // parent stacking context
    // padding reset so we don't get a weird dialog visual square showing up
    wrappingDialogElement.style.cssText = `display:none; z-index: ${this.config.zIndex}; padding: 0;`;
    this.__wrappingDialogNode = wrappingDialogElement;

    /**
     * Based on the configuration of the developer, multiple scenarios are accounted for
     * A. We already have a contentWrapperNode ()
     */
    if (!this.config?.contentWrapperNode) {
      this.__contentWrapperNode = document.createElement('div');
    }
    this.contentWrapperNode.setAttribute('data-id', 'content-wrapper');

    rearrangeNodes({
      wrappingDialogNodeL1: wrappingDialogElement,
      contentWrapperNodeL2: this.contentWrapperNode,
      contentNodeL3: this.contentNode,
    });
    // @ts-ignore
    wrappingDialogElement.open = true;
    if (this.isTooltip) {
      // needed to prevent tooltip getting focus in Safari and Firefox
      wrappingDialogElement.setAttribute('tabindex', '-1');
    }

    this.__wrappingDialogNode.style.display = 'none';
    this.contentWrapperNode.style.zIndex = '1';

    if (getComputedStyle(this.contentNode).position === 'absolute') {
      // Having a _contWrapperNode and a contentNode with 'position:absolute' results in
      // computed height of 0...
      this.contentNode.style.position = 'static';
    }
  }
Here we arrange our content node via:
1. HTMLDialogElement: the content will always be painted to the browser's top layer
  - no matter what context the contentNode lives in, the overlay will be painted correctly via the <dialog> element,
    even if 'overflow:hidden' or a css transform is applied in its parent hierarchy.
  - the dialog element will be unstyled, but will span the whole screen
  - a backdrop element will be a child of the dialog element, so it leverages the capabilities of the parent
    (filling the whole screen if wanted an always painted to top layer)
2. ContentWrapper: the content receives the right positioning styles in a clean/non conflicting way:
 - local positioning: receive inline (position) styling that can never conflict with the already existing computed styles
 - global positioning: receive flex (child) classes that position the content correctly relative to the viewport

The resulting structure that will be created looks like this:

...
<dialog role="none">
  <div id="optional-backdrop"></div>
  <div id="content-wrapper-node">
    <!-- this was the (slot for) original content node -->
    <slot name="content"></slot>
  </div>
</dialog>
...

@private