Fix edge case: click events inside buttons with popover descendants

Given a structure like:

```
<button popovertarget=foo>Activate
  <div popover id=foo>Clicking me shouldn't close me</div>
</button>
```

With the popover open, clicking the popover will propagate a click
upward to the button, which will close the button. This change ensures
that the original target is checked, and if it is a
ShadowIncludingDescendantOf the button then the popover behaviour is not
invoked.

Differential Revision: https://phabricator.services.mozilla.com/D259955

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1932700
gecko-commit: c966ce3fbecccc0f8d0f08f373a600d71d9a2f7a
gecko-reviewers: dom-core, smaug

Author: keithamus

html/semantics/popovers/popover-nested-in-button.html

@@ -21,6 +21,16 @@
   </div>
 </button>
 
+<div id=case4>
+  <template shadowrootmode=open>
+    <button popovertarget=case4>Button
+      <div popover id=case4>
+        <span class=descendant>Popover</span>
+      </div>
+    </button>
+  </template>
+</div>
+
 <script>
 promise_test(async t => {
   const invoker = document.querySelector('#case1');
@@ -60,4 +70,15 @@
   innerInvoker.click();
   assert_false(popover.matches(':popover-open'),'inner invoker still works');
 },'invoker inside popover still works, even with weird nesting');
+
+promise_test(async t => {
+  const popover = document.querySelector('#case4').shadowRoot.querySelector('[popover]');
+  const invoker = popover.parentElement;
+  const descendant = popover.querySelector('.descendant');
+  assert_false(popover.matches(':popover-open'));
+  invoker.click();
+  assert_true(popover.matches(':popover-open'));
+  descendant.click();
+  assert_true(popover.matches(':popover-open'),'descendant doesn\'t close popover');
+},'invoker inside popover still works, even inside of a shadowroot');
 </script>