Support modals embedded in Web Components

[JulienChebance]

Prerequisites

• [X] I have searched for duplicate or closed feature requests
• [X] 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.

[GeoSot]

@JulienChebance can you open a PR with your idea? (I am not sure about backdrop & scrollbar behavior)