Adjust docs

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 --

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,21 +704,26 @@ <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
  </button>
  </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>