External Links

ln-external-links runs globally across document.body watching all <a> and <area> elements. When an element's href hostname differs from window.location.host, it sets target="_blank", merges rel="noopener noreferrer", appends an accessible <span class="sr-only">(opens in new tab)</span>, and marks it with data-ln-external-link="processed" to prevent redundant mutations.

There is no opt-in attribute and no imperative init call — the decorator runs autonomously, safely handling initial server-rendered markup and dynamic links added via AJAX.

The component exists because external-link hardening is a tiny, everywhere concern. The project that gets it right does it once, in one place, and forgets it. The project that gets it wrong scatters one-off hand-decorations across templates, misses the dynamic ones loaded by AJAX, and ships the day a new contributor adds an <a href="https://..."> without thinking about rel.

"External" is defined precisely as hostname inequality: the link's hostname is non-empty AND differs from window.location.hostname. That single test rejects mailto:, tel:, javascript:, relative paths, and same-page anchors in one line. It does not distinguish ports or protocols — different ports on the same host are "internal." Subdomains of the same root are "external."

For the full guide see the ln-external-links README and the architecture reference.

There is no markup contract. Every <a> and <area> on the page participates by default. The "before" / "after" view tells the whole story:

<!-- Before (your authored HTML) -->
<a href="https://example.com">Read more</a>

<!-- After (what ln-external-links produces) -->
<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer"
   data-ln-external-link="processed">
    Read more
    <span class="sr-only">(opens in new tab)</span>
</a>

<!-- Internal links — no change -->
<a href="/dashboard">Dashboard</a>
<a href="#section">Jump</a>
<a href="mailto:hello@livenetworks.mk">Email</a>

The four mutations

For each external link, the component performs four DOM writes in this order: target="_blank", rel="noopener noreferrer", append a <span class="sr-only">(opens in new tab)</span> as the link's last child, and set the marker attribute data-ln-external-link="processed". The marker is the idempotency gate — every subsequent processing pass early-returns on links that already carry it.

What rel="noopener noreferrer" buys you

noopener strips window.opener in the new tab — without it, the destination site can call window.opener.location = '...' and silently navigate the source tab to a phishing page (the classic "tabnabbing" exploit). Modern browsers already apply this semantics to target="_blank" by default since 2021, but rel="noopener" remains recommended as defense-in-depth and for older browsers — it costs nothing to set. noreferrer additionally suppresses the Referer header on the outgoing request — a privacy posture, not a security primitive.

Accessibility — the sr-only hint

WCAG 2.4.4 ("Link Purpose") expects a verbal cue when target="_blank" opens a link in a new tab. The component appends an English-language hint span ((opens in new tab)) inside every processed link. Sighted users see no change because .sr-only clips the span to a 1×1 box; screen readers announce the suffix when the link receives focus.

The single test (line 9 of the source): link.hostname && link.hostname !== window.location.hostname. Behavior on the URLs your project will actually encounter:

<a href="https://oauth.example.com/return"
   data-ln-external-link="processed">
    Continue with Example (same tab)
</a>

// The only public function. Re-scans a subtree for a, area elements
// and applies decoration synchronously. Already-processed links no-op.
window.lnExternalLinks.process(container);

// Default container is document.body — no argument re-scans the whole page.
window.lnExternalLinks.process();

// To force re-decoration on a link whose href just changed:
link.removeAttribute('data-ln-external-link');
window.lnExternalLinks.process(link.parentElement);

There is no destroy(), no init(), no per-element instance API. The component is a single document-level click delegate plus a single body-level MutationObserver — both live for the document's lifetime.

:clicked is a notification, not a hook. The component does not call preventDefault() on the click and does not check the CustomEvent's defaultPrevented. To intercept navigation, attach a click listener to the link or a parent in the capture phase and preventDefault() the platform click event — see the interstitial example.

1. Calling preventDefault() on :clicked and expecting navigation to stop

The component does not honor defaultPrevented on the CustomEvent. Use a capture-phase platform click listener to intercept navigation.

2. Different ports treated as cross-host

The host comparison uses hostname, which strips ports. localhost:3000 and localhost:8080 are "internal" to the component. Same with different protocols on the same host.

3. Reading :clicked.detail.text for analytics and getting the sr-only hint suffix

link.textContent includes the appended (opens in new tab) hint span. Strip it with label.replace(/\s*\(opens in new tab\)\s*$/, '') or read non-hint child nodes manually.