From 01019a9dcef67429d68e51cc6227c5a980fe7caf Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Fri, 19 Jul 2024 11:15:06 -0400
Subject: [PATCH] Adjust docs

---
 CHANGELOG.md |  5 +++++
 index.html   | 26 +++++++++++++++-----------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 65b9cda..ccf42c2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Popover Attribute Polyfill Changelog
 
+## Unreleased
+
+- 🐛 BUGFIX: Add support for slotting elements into popovers --
+  [#215](https://github.com/oddbird/popover-polyfill/pull/215)
+
 ## 0.4.3: 2024-04-26
 
 - 🐛 BUGFIX: Check for `window` before applying polyfill --
diff --git a/index.html b/index.html
index 6625729..c090af8 100644
--- a/index.html
+++ b/index.html
@@ -678,25 +678,24 @@ <h2 data-header>
   &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
+            Shadow Root Popover with Slotted Contents
           </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
+            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><span>I’m a slotted element</span></div>
           </div>
           <script type="module">
             const shadowHostWithSlot =
-                document.getElementById('shadowHostWithSlot'),
-              shadowHostWithSlotRoot = shadowHostWithSlot.attachShadow({
-                mode: 'open',
-              });
+              document.getElementById('shadowHostWithSlot');
+            const shadowHostWithSlotRoot = shadowHostWithSlot.attachShadow({
+              mode: 'open',
+            });
             shadowHostWithSlotRoot.innerHTML = `
               <style>
                 @layer reset, initial, popover-polyfill, default, demo;
@@ -705,7 +704,7 @@ <h2 data-header>
                 @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 id="shadowedPopoverWithSlot" popover data-popover><slot></slot></div>
               <div class="button-group">
                 <button popovertarget="shadowedPopoverWithSlot" data-btn>
                   Toggle Shadowed Popover
@@ -713,13 +712,18 @@ <h2 data-header>
               </div>`;
           </script>
           <pre><code class="language-html"
->&lt;!-- Shadow DOM --&gt;
+>&lt;!-- Light DOM --&gt;
+&lt;div id="shadowHostWithSlot"&gt;
+  &lt;div&gt;&lt;span&gt;I’m a slotted element&lt;/span&gt;&lt;/div&gt;
+&lt;/div&gt;
+
+&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;slot&gt;&lt;/slot&gt;
 &lt;/div&gt;</code></pre>
         </section>
       </div>