Why does the inert attribute disable a popover even when it is promoted to the Top Layer?
02:04 28 Apr 2026

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

wrapper.

However, I’ve hit a wall. One of my popovers is nested deep inside the

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.


  

  

    
Click 'Next' to continue

What I've tried:

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

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

  3. 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?

html