Insert backdrop into parentOverlay to support nested overlays

iron-overlay-backdrop.d.ts

@@ -37,7 +37,7 @@ interface IronOverlayBackdropElement extends Polymer.Element {
   /**
    * Appends the backdrop to document body if needed.
    */
-  prepare(): void;
+  prepare(parentNode?: Node|null): void;
 
   /**
    * Shows the backdrop.

iron-overlay-backdrop.html

@@ -89,10 +89,12 @@
 
     /**
      * Appends the backdrop to document body if needed.
+     * @param {Node=} parentNode
      */
-    prepare: function() {
-      if (this.opened && !this.parentNode) {
-        Polymer.dom(document.body).appendChild(this);
+    prepare: function(parentNode) {
+      parentNode = parentNode || document.body;
+      if (this.opened && parentNode !== this.parentNode) {
+        Polymer.dom(parentNode).appendChild(this);
       }
     },
 
@@ -131,8 +133,8 @@
      */
     _openedChanged: function(opened) {
       if (opened) {
-        // Auto-attach.
-        this.prepare();
+        // Auto-attach, keep current parent.
+        this.prepare(this.parentNode);
       } else {
         // Animation might be disabled via the mixin or opacity custom property.
         // If it is disabled in other ways, it's up to the user to call complete.

iron-overlay-manager.html

@@ -227,10 +227,20 @@
       }
       this.backdropElement.style.zIndex = this._getZ(overlay) - 1;
       this.backdropElement.opened = !!overlay;
-      // Property observers are not fired until element is attached
-      // in Polymer 2.x, so we ensure element is attached if needed.
-      // https://github.com/Polymer/polymer/issues/4526
-      this.backdropElement.prepare();
+      // Insert the backdropElement in the dialog with backdrop below it
+      // in order to support nested overlays.
+      if (overlay) {
+        var parentOverlay = null;
+        for (var i = this._overlays.length - 1; i >= 0; i--) {
+          var candidate = this._overlays[i];
+          if (candidate !== overlay && candidate.withBackdrop &&
+              Polymer.dom(candidate).deepContains(overlay)) {
+            parentOverlay = candidate;
+            break;
+          }
+        }
+        this.backdropElement.prepare(parentOverlay);
+      }
     },
 
     /**