Skip to main content

Improper Widget Placement Detection Warnings

In non-production environments, HAPI Elements now automatically detects when a widget is placed inside a hidden or non-visible container and logs a [HAPI] WIDGET VISIBILITY WARNING to the browser console. Loading widget iframes when they are not visible to the end user impacts performance, and this warning helps developers catch common integration pitfalls early during development.


The warning is logged once per widget instance and includes the reason, the widget tag name, and the ancestor element causing the visibility issue. The following cases are detected:

  • An ancestor element has display: none
  • An ancestor element has visibility: hidden
  • An ancestor element has opacity: 0 (or near zero)
  • An ancestor element has zero width or height
  • An ancestor element has the HTML hidden attribute
  • The widget is inside a closed <details> element
  • An ancestor element has aria-hidden="true"
  • The widget is positioned off-screen (outside the viewport)

We recommend using conditional rendering or only mounting the widget web component when its container is visible (e.g. when the tab or panel is active, or when the element is scrolled into view).