story that proves it works inside a shadow dom

Author: nielslyngsoe

packages/uui-popover-container/lib/uui-popover-container-shadowdomtester.element.ts

@@ -0,0 +1,35 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { html, LitElement } from 'lit';
+
+/**
+ * @element uui-popover-container
+ */
+@defineElement('uui-popover-container-shadowdomtester')
+export class UUIPopoverContainerShadowDomTesterElement extends LitElement {
+  render() {
+    return html`<div
+        style="height: 500px; overflow: auto; outline: 1px solid black">
+        <div
+          style="width: 300px; height: 300px; outline: 1px solid black; overflow: auto;">
+          <div style="height: 150px"></div>
+          <uui-button
+            id="popover-button"
+            popovertarget="popover-container"
+            look="primary"
+            label="Open popover">
+            Open popover
+          </uui-button>
+          <div style="height: 150px"></div>
+          <div style="height: 150px"></div>
+        </div>
+        <div style="height: 400px"></div>
+      </div>
+      <uui-popover-container id="popover-container" popover>
+        <div
+          style="width: 100%; background-color: var(--uui-color-surface); max-width: 200px; box-shadow: var(--uui-shadow-depth-4); padding: var(--uui-size-space-4); border-radius: var(--uui-border-radius); font-size: 0.9rem;">
+          <h3>Scroll!</h3>
+          Scrolling in any of the 2 boxes should trigger an update
+        </div>
+      </uui-popover-container>`;
+  }
+}

packages/uui-popover-container/lib/uui-popover-container.story.ts

@@ -3,6 +3,7 @@ import readme from '../README.md?raw';
 import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { UUIPopoverContainerElement } from '.';
+import './uui-popover-container-shadowdomtester.element.js';
 
 const meta: Meta<UUIPopoverContainerElement> = {
   id: 'uui-popover-container',
@@ -215,3 +216,27 @@ export const InsideScrollContainer: Story = {
     </uui-popover-container>
   `,
 };
+
+export const InsideShadowDOMScrollContainer: Story = {
+  args: {
+    placement: 'bottom-start',
+    margin: 0,
+  },
+  argTypes: {
+    open: {
+      control: false,
+    },
+  },
+  render: () => html`
+    <div style="height: 500px; overflow: auto; outline: 1px solid black">
+      <div
+        style="width: 300px; height: 300px; outline: 1px solid black; overflow: auto;">
+        <div style="height: 150px"></div>
+        <uui-popover-container-shadowdomtester></uui-popover-container-shadowdomtester>
+        <div style="height: 150px"></div>
+        <div style="height: 150px"></div>
+      </div>
+      <div style="height: 400px"></div>
+    </div>
+  `,
+};