Overlay

The Overlay component is used to show an overlay and a button to open the overlay.

Import

import { Overlay } from "@schukai/monster/source/components/layout/overlay.mjs";

Source

View source code

Package

@schukai/monster

Since

1.0.0

Introduction

This versatile web component is more than just a UI element — it plays a key role in enhancing interactivity and engagement across a wide range of web applications. Whether you're building a simple website or a complex enterprise-level system, this component is designed to elevate user interaction and satisfaction.

Key Features

Dynamic interaction: Enables real-time user engagement, making the web experience more intuitive and user-focused.
Customizable appearance: Easily adapt the look and feel of the component to match your brand or application's design for a consistent user interface.
Accessibility: Built with accessibility best practices to ensure a seamless experience for all users, regardless of their device or environment.
Visual feedback effect: Subtle visual cues provide immediate feedback to user actions, enhancing responsiveness and interactivity.
Programmatic control: Exposes methods like trigger, focus, and deactivate for greater flexibility and control in development.

Improving the User Experience

This component extends beyond its core functionality to deliver a rich, interactive experience. By combining visual feedback with dynamic content interaction, it not only enhances the visual appeal but also ensures users receive clear, immediate responses to their actions — making the web more intuitive and user-friendly.

These enhancements are backed by user research demonstrating a significant boost in engagement and overall satisfaction.

Efficiency in the Development Process

Integrating this component into your workflow is seamless. Its compatibility with standard web technologies, paired with a flexible and modular architecture, ensures it fits naturally into both small and large-scale projects. The ease of customization and clear structure streamline the development process and boost productivity.

Overlay Simple

Javascript

/** this example does not use an extra script **/

HTML

/** this example does not use an extra html file **/

Stylesheet

/** no additional stylesheet is defined **/

Component Design

This component uses the Shadow DOM to encapsulate its internal structure and styling. By leveraging a shadow root, the component's internal elements are isolated from the rest of the DOM, ensuring that external styles or scripts do not unintentionally affect its layout or behavior.

Shadow DOM and Accessibility

Because the component is encapsulated within a shadow root, direct access to its internal elements is restricted. This means developers cannot manipulate or style these elements from outside the component. The Shadow DOM helps maintain consistency in design and behavior by preventing external interference.

Customizing Through Exported Parts

Although the Shadow DOM restricts direct access to internal structures, customization is still possible through exported parts. Specific parts of the component are explicitly marked for export, making them accessible for styling via CSS. This allows you to tailor the component’s appearance without compromising its encapsulation.

Available Part Attributes

control: This part represents the entire control section of the slider, including navigation buttons and thumbnails. Use it to style the layout and background of the control panel.

The example below shows how to target and customize these parts using CSS part attributes:


monster-component::part(control) {
    background-color: #f0f0f0;
    padding: 10px;
}

Explanation of the Example

monster-slider::part(control): Applies styling to the entire control panel, adding a light background color and some padding for spacing.

Accessibility

Accessibility is a key consideration in the design of this component. By following best practices for web accessibility, the component ensures that users of all abilities can interact with it effectively. This includes support for keyboard navigation, screen readers, and other assistive technologies to provide an inclusive user experience.

HTML Structure

<monster-overlay></monster-overlay>

JavaScript Initialization

const element = document.createElement('monster-overlay');
document.body.appendChild(element);

Exported

Overlay

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

overlay

string

undefined

Overlay definitions

overlay.content

string

undefined

Content template

overlay.class

string

undefined

Class name

classes.name

string

undefined

Name

classes

object

Class definitions

classes.body

string

hidden

Class name for the body

classes.overlay

string

hide-empty

Class name for the overlay

features

object

Feature definitions

features.escapeKey

boolean

true

If true the overlay can be closed with the escape key

features.openButton

boolean

false

If true the overlay can be opened with a button

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Behavioral methods

close()

Returns

{Overlay}

open()

Returns

{Overlay}

Events

monster-overlay-before-open
monster-overlay-open
monster-overlay-before-close
monster-overlay-closed

toggle()

Returns

{Overlay}

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{Overlay}

connectedCallback()

Events

The component emits the following events:

monster-overlay-before-open
monster-overlay-open
monster-overlay-before-close
monster-overlay-closed
monster-overlay-before-open
monster-overlay-open
monster-overlay-before-close
monster-overlay-closed

For more information on how to handle events, see the mdn documentation.

The current width of the area is too small to display the content correctly.