Background

Referencing the MDN documentation on Popover API: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API (not to be confused with Bootstrap's popover).

I have multiple popovers, something like this:

<div id="Popover_1" popover>Content of 1</div>
<div id="Popover_2" popover>Content of 2</div>

I'm attempting to trigger a function if a popover is toggled closed. I fully understand how to add an event listener to each popover and it works just fine. Something like:

window.onload = function() {
    const popovers = document.querySelectorAll("[popover]")
    popovers.forEach(popover => {
        popover.addEventListener("beforetoggle", (event) => {
            if (event.newState === "closed") {
                console.log(event);
            }
        });
    });
}

However, for the sake of simplicity, I'd like to use document.addEventListener instead, as I need to trigger the same function regardless of popover source. My understanding is that it should work due to the event bubbling up. I can't get it to. I recognize that some events do not, but in reviewing the MDN I don't see that it wouldn't.

Question

Therefore, my question is: Am I going about this wrong or is bubble up not working? Or, do I have a basic misunderstanding of what I'm dealing with?