From e19a0f483c65a8a758da78b86e3723e9270e5bd3 Mon Sep 17 00:00:00 2001
From: Thijs Louisse <Thijs.Louisse@ing.com>
Date: Mon, 18 May 2020 09:55:43 +0200
Subject: [PATCH] fix(overlays): local backdrop outlet

---
 packages/dialog/src/LionDialog.js                         | 1 +
 packages/input-datepicker/src/LionCalendarOverlayFrame.js | 1 +
 packages/overlays/README.md                               | 1 +
 packages/overlays/src/OverlayController.js                | 6 ++----
 packages/overlays/stories/20-index.stories.mdx            | 2 ++
 packages/overlays/stories/demo-overlay-system.js          | 1 +
 packages/overlays/test/OverlayMixin.test.js               | 1 +
 packages/select-rich/src/LionSelectRich.js                | 1 +
 packages/tooltip/src/LionTooltip.js                       | 1 +
 9 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/dialog/src/LionDialog.js b/packages/dialog/src/LionDialog.js
index 315f3bdc9..66d74626b 100644
--- a/packages/dialog/src/LionDialog.js
+++ b/packages/dialog/src/LionDialog.js
@@ -30,6 +30,7 @@ export class LionDialog extends OverlayMixin(LitElement) {
   render() {
     return html`
       <slot name="invoker"></slot>
+      <slot name="_overlay-shadow-outlet"></slot>
       <div id="overlay-content-node-wrapper">
         <slot name="content"></slot>
       </div>
diff --git a/packages/input-datepicker/src/LionCalendarOverlayFrame.js b/packages/input-datepicker/src/LionCalendarOverlayFrame.js
index 15f95e8d4..7c3e7466d 100644
--- a/packages/input-datepicker/src/LionCalendarOverlayFrame.js
+++ b/packages/input-datepicker/src/LionCalendarOverlayFrame.js
@@ -115,6 +115,7 @@ export class LionCalendarOverlayFrame extends LocalizeMixin(LitElement) {
             <slot name="close-icon">&times;</slot>
           </button>
         </div>
+        <slot name="_overlay-shadow-outlet"></slot>
         <div id="overlay-content-node-wrapper">
           <slot name="content"></slot>
         </div>
diff --git a/packages/overlays/README.md b/packages/overlays/README.md
index ff397423c..0c80c4ef4 100644
--- a/packages/overlays/README.md
+++ b/packages/overlays/README.md
@@ -103,6 +103,7 @@ class MyOverlayComponent extends LitElement {
   render() {
     return html`
       <slot name="invoker"></slot>
+      <slot name="_overlay-shadow-outlet"></slot>
       <div id="overlay-content-node-wrapper">
         <slot name="content"></slot>
       </div>
diff --git a/packages/overlays/src/OverlayController.js b/packages/overlays/src/OverlayController.js
index 85a796683..8238b6125 100644
--- a/packages/overlays/src/OverlayController.js
+++ b/packages/overlays/src/OverlayController.js
@@ -527,10 +527,8 @@ export class OverlayController {
             this.backdropNode = document.createElement('div');
             this.backdropNode.classList.add('local-overlays__backdrop');
           }
-          this._contentWrapperNode.parentNode.insertBefore(
-            this.backdropNode,
-            this._contentWrapperNode,
-          );
+          this.backdropNode.slot = '_overlay-shadow-outlet';
+          this.contentNode.parentNode.insertBefore(this.backdropNode, this.contentNode);
           break;
         case 'show':
           this.__hasActiveBackdrop = true;
diff --git a/packages/overlays/stories/20-index.stories.mdx b/packages/overlays/stories/20-index.stories.mdx
index 360ae8142..2dff7aede 100644
--- a/packages/overlays/stories/20-index.stories.mdx
+++ b/packages/overlays/stories/20-index.stories.mdx
@@ -156,6 +156,7 @@ _teardownOpenCloseListeners() {
 render() {
   return html`
     <slot name="invoker"></slot>
+    <slot name="_overlay-shadow-outlet"></slot>
     <div id="overlay-content-node-wrapper">
       <slot name="content"></slot>
     </div>
@@ -507,6 +508,7 @@ class MyOverlayWC extends OverlayMixin(LitElement) {
   render() {
     return html`
       <slot name="invoker"></slot>
+      <slot name="_overlay-shadow-outlet"></slot>
       <div id="overlay-content-node-wrapper">
         <slot name="content"></slot>
       </div>
diff --git a/packages/overlays/stories/demo-overlay-system.js b/packages/overlays/stories/demo-overlay-system.js
index 5a30086a0..589888af8 100644
--- a/packages/overlays/stories/demo-overlay-system.js
+++ b/packages/overlays/stories/demo-overlay-system.js
@@ -30,6 +30,7 @@ class DemoOverlaySystem extends OverlayMixin(LitElement) {
   render() {
     return html`
       <slot name="invoker"></slot>
+      <slot name="_overlay-shadow-outlet"></slot>
       <div id="overlay-content-node-wrapper">
         <slot name="content"></slot>
       </div>
diff --git a/packages/overlays/test/OverlayMixin.test.js b/packages/overlays/test/OverlayMixin.test.js
index 842b90e72..ca4955405 100644
--- a/packages/overlays/test/OverlayMixin.test.js
+++ b/packages/overlays/test/OverlayMixin.test.js
@@ -8,6 +8,7 @@ const tagString = defineCE(
     render() {
       return html`
         <button slot="invoker">invoker button</button>
+        <slot name="_overlay-shadow-outlet"></slot>
         <div id="overlay-content-node-wrapper">
           <div slot="content">content of the overlay</div>
         </div>
diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js
index d891070da..73b59a5bd 100644
--- a/packages/select-rich/src/LionSelectRich.js
+++ b/packages/select-rich/src/LionSelectRich.js
@@ -334,6 +334,7 @@ export class LionSelectRich extends ScopedElementsMixin(
     return html`
       <div class="input-group__input">
         <slot name="invoker"></slot>
+        <slot name="_overlay-shadow-outlet"></slot>
         <div id="overlay-content-node-wrapper">
           <slot name="input"></slot>
         </div>
diff --git a/packages/tooltip/src/LionTooltip.js b/packages/tooltip/src/LionTooltip.js
index b7854a24d..e38c778c1 100644
--- a/packages/tooltip/src/LionTooltip.js
+++ b/packages/tooltip/src/LionTooltip.js
@@ -80,6 +80,7 @@ export class LionTooltip extends OverlayMixin(LitElement) {
   render() {
     return html`
       <slot name="invoker"></slot>
+      <slot name="_overlay-shadow-outlet"></slot>
       <div id="overlay-content-node-wrapper">
         <slot name="content"></slot>
         <div class="arrow" x-arrow>