modal-container added to body element breaks styles scoped to the app-root node

[b2k]

When using scoped styles, to ensure that angular app appearance is consistent and independent of the host page, attaching the modal-container to body forces the developer to either write global css to style the modal or attempt moving the container.

Both of these may cause unknown side-effects for the hosting page. This is particularly relevant when the angular app is embedded into a third party site.

Here is a StackBlitz that demonstrates the issue and a temporary work-around: https://stackblitz.com/edit/ngx-bootstrap-zsdcuj

Expected behavior

ngx-bootstrap components should confine themselves to the angular application's root node.

[b2k]

Here is an example of how we are using scss to provide theme support in our applications. These themes aren't getting propagated to the ngx-bootstrap modal dialog since it is added outside of our app-root node.

styles.scss:

@import 'bootstrap4.scss';
@import 'themes/common.scss';
@import 'themes/blue-light.scss';
@import 'themes/dark-yellow.scss';
/* trimmed for brevity */

themes/blue-light.scss:

app-root.blue-light {
  $primary: #003da6;
  $secondary: #f2f2f2;
  $offwhite: #f2f2f2;
  $light: #ffffff;
  $dark: #000000;
  $midtone: #999999;
  $darktone: #333333;
  $tooltip-bg: #5b5b5b;
  $error: #e40509;
  $error-alt: #e91c1f;
  $valid: #026b22cc;
  $semi-dark: rgba(96, 96, 96, 0.5);
  $semi-light: rgba(192, 192, 192, 0.5);
  $typeAheadHeight: 200px;

  .card {
    background: $light;
    color: $dark;
  }
  #form-control {
    border-bottom: thick solid $primary;
    color: rgba(0, 0, 0, 0.5);
    background-color: $offwhite;
  }
  .btn-primary {
    background-color: $primary;
    border-color: $primary;
    color: $light;
  }
  .btn-secondary {
    background-color: $secondary;
    border-color: $secondary;
    color: $dark;
  }
  h6 {
    color: $darktone;
  }

  h2 {
    color: $primary;
  }
  /* trimmed for brevity */
}