Why does the inert attribute disable a popover even when it is promoted to the Top Layer?

I’m implementing a "Guided Tour" feature using the native HTML Popover API. To ensure the user doesn't click background elements during the tour, I am applying the inert attribute to my <main> wrapper.

However, I’ve hit a wall. One of my popovers is nested deep inside the <main> container for component scoping reasons. Even though the popover is technically promoted to the Top Layer (appearing above everything else in the stacking order), I cannot click any buttons inside the popover or even dismiss it via keyboard when inert is active on the parent.

<main id="app-content"> <button>Background Link</button> <div id="tour-step-1" popover> <p>Click 'Next' to continue</p> <button onclick="nextStep()">Next</button> </div> </main> <button onclick="startTour()">Start Tour</button>

What I've tried:

Calling showPopover() on the div. It appears visually on top of everything.

Setting document.getElementById('app-content').inert = true;.

The Issue: Once inert is true, the "Next" button inside the popover becomes unclickable, even though it's visually in the Top Layer and not clipped by the parent.

I thought the Top Layer was independent of the DOM tree's limitations. If a popover is "out of the flow," why is it still inheriting the "inertness" of its DOM parent?