v146 · Component Scope Inspector

Component Scope Inspector

Three nested components each declare their own trigger scope. Click any "Open" button and watch the event log — a scoped trigger only activates popovers within the same scope boundary, preventing parent components from accidentally responding to child triggers.

Chrome 146+. The trigger: scope CSS property restricts popover/disclosure triggers to the nearest ancestor with trigger-scope: self. This demo uses JS simulation when the property is unavailable. Detecting…

Component A — trigger-scope: self

Panel A — closed

Nested Component A.1 — trigger-scope: self

Panel A.1 — closed

Component B — trigger-scope: self

Panel B — closed

Trigger scope event log

Click buttons above to log trigger scope events…

<!-- CSS trigger scope —  Chrome 146 -->
.component {
  trigger-scope: self; /* scope boundary */
}

<!-- HTML: trigger only activates panels within its scope -->
<div class="component">
  <button popovertarget="panel-a">Open A</button>
  <div id="panel-a" popover>Panel A</div>

  <!-- Nested component: trigger-scope prevents this button
       from also activating #panel-a in the parent -->
  <div class="component">
    <button popovertarget="panel-inner">Open inner</button>
    <div id="panel-inner" popover>Inner panel</div>
  </div>
</div>