Support modals embedded in Web Components

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

Modal class suggests the modal element is part of the document.body, whereas it can be part of a Web Component (and thus a Shadow DOM).
My proposal: add an option to the Modal component in order to be able to define its root element. It's default value would, of course, be document.body.

Motivation and context

In the current v5.2 of Bootstrap, when a Modal is displayed, the following lines are used:

if (!document.body.contains(this._element)) {
  document.body.append(this._element)
}

If the modal element (this._element) is part of a Shadow DOM, and even if it's attached to the current document, document.body.contains(this._element) will always return false.
Then, document.body.append(this._element) will move the modal element from the Shadow DOM to the body element! This generates multiple issues: see this jsfiddle for some examples.

If the developer can specify the Shadow root as an option, the condition would be:

if (!root.contains(this._element)) {
  root.append(this._element)
}

making it works.

Start in js/src/modal.js at the document.body.contains and document.body.append lines linked in the issue, then reproduce the Shadow DOM behavior using the provided jsfiddle. Review how the Modal component is configured and define the root-element behavior so embedded modals remain in their Web Component while the default still uses document.body.