Merge branch 'main' into 175-cascade-layers-support

oddbird · Feb 8, 2024 · 8b90f26 · 8b90f26
2 parents dbf73be + 5cae4df
commit 8b90f26
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Popover Attribute Polyfill Changelog
 
+## Unreleased
+
+- 🐛 BUGFIX: Ensure click events correctly cross out of ShadowDOM --
+  [#177](https://github.com/oddbird/popover-polyfill/pull/177)
+- 🏠 INTERNAL: Upgrade dependencies
+
 ## 0.3.8: 2024-01-16
 
 - 🐛 BUGFIX: Allow synthetic click events to target popovers --

diff --git a/index.html b/index.html
@@ -107,8 +107,8 @@ <h1>Popover Attribute Polyfill</h1>
       <button popovertarget="popover13">Click to toggle Popover 13</button>
 
       <script type="module">
-        const host = document.getElementById('shadowInInvoker');
-        const shadowRoot = host.attachShadow({ mode: 'open' });
+        const shadowInInvoker = document.getElementById('shadowInInvoker');
+        const shadowRoot = shadowInInvoker.attachShadow({ mode: 'open' });
         shadowRoot.innerHTML = `<span>Click to toggle Popover 12</span>`;
       </script>
     </div>

diff --git a/src/popover.ts b/src/popover.ts
@@ -316,8 +316,8 @@ export function apply() {
     if (!(root instanceof ShadowRoot || root instanceof Document)) {
       return;
     }
-    const invoker = composedPath.find(
-      (el) => el.matches && el.matches('[popovertargetaction],[popovertarget]'),
+    const invoker = composedPath.find((el) =>
+      el.matches?.('[popovertargetaction],[popovertarget]'),
     );
     if (invoker) {
       popoverTargetAttributeActivationBehavior(invoker as HTMLButtonElement);