Backdrop

The Backdrop component overlays the entire screen with a translucent dark overlay, typically used to indicate a blocking state or focus attention on a specific element.

Basic Backdrop

Show Backdrop

<me-backdrop id="backdrop"></me-backdrop> <script> document.querySelector('#show-btn').addEventListener('click', () => { document.querySelector('#backdrop').setAttribute('open', ''); }); document.querySelector('#backdrop').addEventListener('me-close', () => { document.querySelector('#backdrop').removeAttribute('open'); }); </script>

Invisible Backdrop

The invisible attribute removes the dark overlay while still blocking pointer events.

Show Invisible Backdrop

<me-backdrop invisible></me-backdrop>

API

Attribute	Type	Default	Description
`open`	boolean	false	Whether the backdrop is visible and active.
`invisible`	boolean	false	Transparent backdrop (no dark overlay).

Events

Event	Description
`me-close`	Fired when the backdrop is clicked.