Overview

An provides a visual layer between overlay content and the rest of your application. It is commonly used with modal dialogs and other overlay elements to create a visual separation and prevent interaction with the background content while the overlay is active.

$3


``
yarn add @spectrum-web-components/underlay
`

Import the side effectful registration of via:

`
import '@spectrum-web-components/underlay/sp-underlay.js';
`

When looking to leverage the Underlay base class as a type and/or for extension purposes, do so via:

`
import { Underlay } from '@spectrum-web-components/underlay';
`

$3

#### Basic Usage

When using an with overlay content, place it as a sibling element before your overlay content.

`html


onclick="
console.log(this.nextElementSibling);
this.nextElementSibling.open = true;
"
>
Open dialog with underlay element






Hello, I'm an overlay!

Enjoy your day...

slot="button"
onclick="
this.parentElement.previousElementSibling.open = false;
"
>
Close


`

$3

To ensure proper layering of your overlay content with the underlay, use appropriate CSS:

`html

`

$3

The ` element helps create an accessible modal experience by:

1. Providing visual separation between modal content and the rest of the page
2. Supporting proper focus management when used with modal dialogs
3. Helping communicate the modal state to assistive technologies