Advanced CSS — DOM Mode

This example set demonstrates the same visual effects as the Web Component version, but using Alap's light DOM mode. Triggers are standard <a class="alap"> elements and the menu renders into a global #alapelem container in the document body. All styling uses plain CSS selectors — no Shadow DOM, no custom properties required.

Web Component vs DOM Mode

Aspect	Web Component	DOM Mode
Trigger	`<alap-link query="...">`	`<a class="alap" data-alap-linkitems="...">`
Menu location	Shadow DOM inside element	Global `#alapelem` in body
Styling	CSS custom properties (`--alap-*`)	Direct CSS on `.alapelem`
Per-trigger	Ancestor selectors	`.alap_${anchorId}` class
Encapsulation	Shadow DOM isolation	None — page CSS applies

DOM mode gives you full control with familiar CSS selectors. The trade-off is that styles are global — you manage specificity yourself. The Web Component version isolates each menu automatically via Shadow DOM.

Basic Example

A minimal trigger with no extra styling: coffee

<a id="basic-demo" class="alap"
   data-alap-linkitems=".coffee">coffee</a>

Click the link above to see the default menu appearance. The remaining pages in this section show how to reshape, shadow, animate, and theme the menu using ordinary CSS.

Styling Approach

In DOM mode, the menu lives in a <div id="alapelem"> appended to the body. Target it directly:

/* Menu container */
#alapelem { ... }

/* List inside the menu */
#alapelem ul { ... }

/* Individual items */
#alapelem .alapListElem { ... }

/* Per-trigger: when opened from anchor "my-link" */
#alapelem.alap_my-link { ... }

Popover Mode

Popover mode is available through the framework adapters (React, Vue, Svelte). The browser's native Popover API handles show/hide, click-outside, and Escape — no JavaScript dismissal logic needed.

The menu still renders as .alapelem. All CSS from this example set works unchanged in popover mode.

Setup difference

DOM mode

// JS
new AlapUI(config, { selector: '.alap' });

<!-- HTML -->
<a class="alap"
   data-alap-linkitems=".coffee">
  coffee
</a>

<!-- Menu injected into body -->
<div id="alapelem"
     class="alapelem alap_my-link">
  <ul>...</ul>
</div>

Popover mode (React)

// JSX
<AlapProvider config={config}
              mode="popover">
  <AlapLink query=".coffee">
    coffee
  </AlapLink>
</AlapProvider>

<!-- Rendered HTML -->
<span popoverTarget="alap-1">
  coffee
</span>
<div id="alap-1" popover="auto"
     class="alapelem">
  <ul>...</ul>
</div>

The trigger changes (from <a> to <span popoverTarget>), but the menu element is the same .alapelem div. Your CSS requires no changes.