fix(overlays): local backdrop outlet

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>

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>

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>

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;

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>

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>

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>

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>

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>