Polyfills the HTML popover attribute and showPopover/hidePopover/togglePopover methods onto HTMLElement, as well as the popovertarget and popovertargetaction attributes on <button> elements.
handleInvokerActivation is using closest which does not cross ShadowDOM correctly. The fix is to use composedPath
event.composedPath().find(el => el.matches && el.matches('[popovertargetaction],[popovertarget]'));
// in place of:
target.closest('[popovertargetaction],[popovertarget]')
In my case, we are sometimes using web-components for rendering svg icons inside of <button> elements. The click works if you hit the edges of the button itself (in the light), but clicking on the icons (in the shadow) does not properly trigger the popover.
jgerigmeyer
commented
9 months ago
handleInvokerActivationis usingclosestwhich does not cross ShadowDOM correctly. The fix is to usecomposedPathIn my case, we are sometimes using web-components for rendering svg icons inside of
<button>elements. The click works if you hit the edges of the button itself (in the light), but clicking on the icons (in the shadow) does not properly trigger the popover.