VIEWPORT_OVERLAY: Layer over the whole viewport
| Severity | Fault | Stage |
|---|---|---|
| error | customer (the source package) | build output |
What it means
Section titled “What it means”The component’s CSS fixes :host over the whole viewport (position: fixed with inset: 0, or 100vw by 100vh), or fixes an inner box over it after dropping the host’s containment (:host { contain: none }) with no state in the selector, so it shows before the visitor acts. Such a layer takes every click of the host page, and when it is transparent the visitor clicks the component believing it is the page (clickjacking). It needs a person’s review: it is refused until then (rule viewport-overlay).
How to fix
Section titled “How to fix”Keep the component in its own box; for a modal, open a <dialog> with showModal() on the visitor’s click, or style the backdrop only in a state the visitor sets ([open], :popover-open, ::backdrop).