Alap v3 — Web Component

Uses the <alap-link> custom element with Shadow DOM. Each element is self-contained — no global menu container.

Basic Usage

My favorite cars

<alap-link query="@cars">cars</alap-link>

Class Queries

Check out some coffee spots or famous bridges.

<alap-link query=".coffee">coffee spots</alap-link>
<alap-link query=".bridge">bridges</alap-link>

Operators

NYC bridges (AND) — NYC or SF (OR) — NYC without bridges (WITHOUT)

<alap-link query=".nyc + .bridge">NYC bridges</alap-link>
<alap-link query=".nyc | .sf">NYC or SF</alap-link>
<alap-link query=".nyc - .bridge">NYC without bridges</alap-link>

Parentheses

NYC or SF bridges — groups two intersections, then unions.

<alap-link query="(.nyc + .bridge) | (.sf + .bridge)">
  NYC or SF bridges
</alap-link>

Theming with `::part()`

Shadow DOM isolates menu styles, but ::part() lets you customize from outside. NYC spots (dark theme)

/* The menu exposes five parts: menu, list, item, link, image */
#nycspots::part(menu) {
  background: #1e293b;
  border-color: #334155;
}
#nycspots::part(link) {
  color: #e2e8f0;
}

Setup

import { registerConfig, defineAlapLink } from 'alap';
import { myConfig } from './config';

// 1. Register config so elements can find it
registerConfig(myConfig);

// 2. Define the <alap-link> custom element
defineAlapLink();

That's it. No class instantiation, no DOM scanning. Each <alap-link> is self-contained.