From cb6cce3c51bb09af7c39e82cce2d6a6383e52c09 Mon Sep 17 00:00:00 2001
From: Totati <attila.th@hotmail.com>
Date: Fri, 19 Jul 2024 08:46:30 +0200
Subject: [PATCH] Add support for slotting elements into popovers

---
 index.html             | 44 ++++++++++++++++++++++++++++++++++++++++++
 src/popover-helpers.ts |  5 ++++-
 tests/dismiss.spec.ts  | 14 ++++++++++++++
 3 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 27c2c34..6625729 100644
--- a/index.html
+++ b/index.html
@@ -676,6 +676,50 @@ <h2 data-header>
 &lt;div id="shadowedPopover" popover&gt;Shadowed Popover&lt;/div&gt;
 &lt;div&gt;
   &lt;div id="shadowedNestedPopover" popover&gt;Shadowed Nested Popover&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+        </section>
+
+        <section id="popover-shadow-root-with-slot" class="demo-item">
+          <h2 data-header>
+            <a href="#popover-shadow-root-with-slot" aria-hidden="true">🔗</a>
+            Element slotted in an Shadow Root Popover
+          </h2>
+          <p class="note">
+            Here, both the popover control button and the popover are created in
+            the Shadow DOM, but an element is slotted in the popover
+          </p>
+          <div id="shadowHostWithSlot">
+            <div><span>I'm a slotted element</span></div>
+          </div>
+          <script type="module">
+            const shadowHostWithSlot =
+                document.getElementById('shadowHostWithSlot'),
+              shadowHostWithSlotRoot = shadowHostWithSlot.attachShadow({
+                mode: 'open',
+              });
+            shadowHostWithSlotRoot.innerHTML = `
+              <style>
+                @layer reset, initial, popover-polyfill, default, demo;
+
+                @import url('/css/demo.css') layer(demo);
+                @import url('/css/fonts.css') layer(initial);
+                @import url('/css/base.css') layer(default);
+              </style>
+              <div id="shadowedPopoverWithSlot" popover data-popover><slot><slot></div>
+              <div class="button-group">
+                <button popovertarget="shadowedPopoverWithSlot" data-btn>
+                  Toggle Shadowed Popover
+                </button>
+              </div>`;
+          </script>
+          <pre><code class="language-html"
+>&lt;!-- Shadow DOM --&gt;
+&lt;button popovertarget="shadowedPopoverWithSlot"&gt;
+  Toggle Shadowed Popover
+&lt;/button&gt;
+
+&lt;div id="shadowedPopoverWithSlot" popover&gt;
+  &lt;/slot&gt;&lt;/slot&gt;
 &lt;/div&gt;</code></pre>
         </section>
       </div>
diff --git a/src/popover-helpers.ts b/src/popover-helpers.ts
index 46e65bd..17db3b5 100644
--- a/src/popover-helpers.ts
+++ b/src/popover-helpers.ts
@@ -113,7 +113,10 @@ function nearestInclusiveOpenPopover(
     ) {
       return node;
     }
-    node = node.parentElement || getRootNode(node);
+    node =
+      (node instanceof Element && node.assignedSlot) ||
+      node.parentElement ||
+      getRootNode(node);
     if (node instanceof ShadowRoot) node = node.host;
     if (node instanceof Document) return;
   }
diff --git a/tests/dismiss.spec.ts b/tests/dismiss.spec.ts
index d4f0477..4f7b740 100644
--- a/tests/dismiss.spec.ts
+++ b/tests/dismiss.spec.ts
@@ -114,3 +114,17 @@ test('pressing Escape focused in popover dismisses auto popovers', async ({
 
   await expect(singleActionShowPopover).toBeHidden();
 });
+
+test('click inside auto popover with a slotted element does not dismiss itself', async ({
+  page,
+}) => {
+  const testPopover = (await page.locator('#shadowedPopoverWithSlot')).nth(0);
+  await expect(
+    await testPopover.evaluate((node) => node.showPopover()),
+  ).toBeUndefined();
+  await expect(testPopover).toBeVisible();
+
+  const slottedText = (await page.locator('#shadowHostWithSlot span')).nth(0);
+  await slottedText.evaluate((node) => node.click());
+  await expect(testPopover).toBeVisible();
+});