1 files changed, 5 insertions, 4 deletions
diff --git a/js/src/util/backdrop.js b/js/src/util/backdrop.js
index f7990f7019..07ad20fab7 100644
--- a/js/src/util/backdrop.js
+++ b/js/src/util/backdrop.js
@@ -6,19 +6,19 @@
  */
 
 import EventHandler from '../dom/event-handler'
-import { emulateTransitionEnd, execute, getTransitionDurationFromElement, reflow, typeCheckConfig } from './index'
+import { emulateTransitionEnd, execute, getElement, getTransitionDurationFromElement, reflow, typeCheckConfig } from './index'
 
 const Default = {
   isVisible: true, // if false, we use the backdrop helper without adding any element to the dom
   isAnimated: false,
-  rootElement: document.body, // give the choice to place backdrop under different elements
+  rootElement: 'body', // give the choice to place backdrop under different elements
   clickCallback: null
 }
 
 const DefaultType = {
   isVisible: 'boolean',
   isAnimated: 'boolean',
-  rootElement: 'element',
+  rootElement: '(element|string)',
   clickCallback: '(function|null)'
 }
 const NAME = 'backdrop'
@@ -90,7 +90,8 @@ class Backdrop {
       ...(typeof config === 'object' ? config : {})
     }
 
-    config.rootElement = config.rootElement || document.body
+    // use getElement() with the default "body" to get a fresh Element on each instantiation
+    config.rootElement = getElement(config.rootElement)
     typeCheckConfig(NAME, config, DefaultType)
     return config
   }