<lm-link-preview> – Lenkeforhåndsvisning / Link preview

Om komponenten

Kanonisk navn: <lm-link-preview>
Synonymer: hovercard, sideforhåndsvisning, link preview, page preview, wikipedia-forhåndsvisning
Kategori: navigasjon
ARIA-mønster: Ikke aktuelt - Ikke et eget APG-widgetmønster - selve lenken beholder sin native <a>-semantikk og -tastaturoperasjon uendret. Popoveren er et "rich hint" etter Interest Invokers-forklaringen fra open-ui.org: når nettleseren støtter interestfor, beregner den selv riktig aria-expanded/aria-details-relasjon mellom lenken og boblen - komponenten trenger ingen egen ARIA-håndtering i det tilfellet. I fallback-modus settes aria-describedby manuelt, samme mønster som <lm-tooltip>.
Parts: ekstern-ikon, forhandsvisning, tittel, laster, beskrivelse
Native-first-vurdering: Bruker den native interestfor-attributten (Interest Invokers) koblet mot et popover="hint"-element når nettleseren støtter det (nyeste Chrome) - da styrer nettleseren selv vis-/skjul-tidspunkt, tastaturfokus-utløsning og ARIA-relasjonene, uten egne mouseenter/mouseleave/focus-lyttere. Safari støtter ennå ikke interestfor/popover="hint" (sjekket via caniuse.com), så komponenten faller tilbake til en tilsvarende hover-/fokus-/Escape-håndtering pluss Popover API i "manual"-modus, nøyaktig samme fallback-mønster som <lm-tooltip> allerede bruker. Selve forhåndsvisningsinnholdet (tittel/beskrivelse) er ikke noe plattformen kan gi native - det hentes fra målsidens egen HTML (<title>/<meta name="description">) med fetch+DOMParser, uten noe eget API.
Nettleserstøtte: Krever ingen spesialbehandling for grunnfunksjonen (selve lenken virker uendret i alle nettlesere). Forhåndsvisnings-popoveren bruker interestfor+popover="hint" i nyeste Chrome, og en tilsvarende hover-/fokus-/Popover API-fallback (popover="manual") i Safari, som ennå ikke støtter interestfor/hint-typen (sjekket via caniuse.com, sist bekreftet 2026).
Design-tokens: var(--font-size-extra-small, ...), var(--opacity-muted, ...), var(--space-small, ...), var(--space-2xs, ...), var(--border-width, ...), var(--color-surface-muted, ...), var(--radius-medium, ...), var(--color-surface, ...), var(--color-surface-text, ...), var(--shadow-elevated, ...), var(--font-overskrift, ...), var(--font-liten, ...), var(--z-overlay-top, ...)
Sist endret: 20. september 2026
Brukt: Ikke i bruk andre steder ennå

Formål

Pakker en enkelt <a>-lenke og gir den to ting gratis: (1) et lite pil-ikon etter lenketeksten når lenken peker til et annet nettsted, slik at brukeren ser forskjell på interne og eksterne lenker uten å måtte lese/gjette ut fra URL-en, og (2) for interne lenker - en popover med målsidens tittel og meta-beskrivelse når brukeren holder musepekeren over eller fokuserer lenken, akkurat som Wikipedias kjente lenke-forhåndsvisning. Innholdet i boblen hentes og parses fra selve målsidens HTML (samme opphav, ingen eget API/datakilde å vedlikeholde) og caches per URL for hele sidevisningen, slik at samme mål aldri hentes flere ganger.

Egner seg for

Interne lenker der brukeren har nytte av å se hva de er på vei til uten å måtte navigere dit og eventuelt tilbake - lenkelister, relaterte artikler, innholdsfortegnelser.
Ethvert sted lenker til andre nettsteder vises ved siden av interne lenker, der det er nyttig for brukeren å se forskjellen før de klikker.

Egner seg ikke for

Lenker i tett, linjebasert brødtekst der en ekstra popover per lenke ville blitt støyende - bruk komponenten selektivt, ikke pakk automatisk alle lenker på siden.
Eksterne lenker sin egen forhåndsvisning - komponenten henter kun innhold fra samme opphav (ingen CORS-avhengighet), så eksterne lenker får kun den visuelle pil-markeringen, ingen popover-innhold.
Lenker som allerede er tydelig merket som eksterne på annen måte (f.eks. i en navigasjonsmeny som kun peker ut av siden) - da er markeringen overflødig.

Bruk

<script type="module" src="/designsystem/komponenter/navigasjon/link-preview/link-preview.js"></script>

<lm-link-preview>
    <a href="/turer/oslo/index.html">Oslo-turen</a>
</lm-link-preview>
Les mer på
<lm-link-preview>
    <a href="https://developer.mozilla.org/">MDN</a>
</lm-link-preview>.

Prøv selv

Rediger koden under - resultatet oppdateres live.

Slots

Slot	Beskrivelse
(standard)	Den ene `<a href="...">`-lenken forhåndsvisningen/markeringen gjelder for.

Parts

Part	Beskrivelse
`ekstern-ikon`	Det vesle pil-ikonet som vises etter lenketeksten når lenken er ekstern.
`forhandsvisning`	Selve forhåndsvisnings-boblen (`role="tooltip"`).
`tittel`	Målsidens tittel i boblen.
`laster`	Laste-/feilmeldingsteksten som vises til/hvis innholdet ikke lar seg hente.
`beskrivelse`	Målsidens meta-beskrivelse i boblen.

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-link-preview::part(ekstern-ikon) {
    /* egne stiler for "Det vesle pil-ikonet som vises etter lenketeksten når lenken er ekstern." */
}

lm-link-preview::part(forhandsvisning) {
    /* egne stiler for "Selve forhåndsvisnings-boblen (`role="tooltip"`)." */
}

lm-link-preview::part(tittel) {
    /* egne stiler for "Målsidens tittel i boblen." */
}

lm-link-preview::part(laster) {
    /* egne stiler for "Laste-/feilmeldingsteksten som vises til/hvis innholdet ikke lar seg hente." */
}

lm-link-preview::part(beskrivelse) {
    /* egne stiler for "Målsidens meta-beskrivelse i boblen." */
}

Tilgjengelighet

Selve <a>-elementet er uendret og fullt tastaturoperabelt som en vanlig lenke - komponenten hindrer aldri klikk/navigering, den legger kun til en tilleggsvisning ved interesse. Boblen har role="tooltip" og kobles til lenken via interestfor (native) eller aria-describedby (fallback). Escape lukker en åpen forhåndsvisning i fallback-modus uten å flytte fokus bort fra lenken.

Forhåndsvisningen er alltid et supplement - lenken navigerer helt normalt ved klikk, uavhengig av om popoveren har rukket å laste innhold eller ikke.
300 ms forsinkelse før visning ved hover (fallback-modus) for å unngå at boblen blinker forbi ved rask musebevegelse - fokus viser den umiddelbart, uten forsinkelse.
Sideanker- (#...), mailto:-, tel:- og eksterne lenker får verken interestfor/aria-describedby eller forhåndsvisnings-henting - kun ekte interne sider forhåndsvises.

Detaljer

Henter og parser målsidens HTML med fetch+DOMParser første gang brukeren viser interesse for lenken (ikke ved sideinnlasting) - <title> blir boblens tittel, <meta name="description"> blir beskrivelsen (utelates hvis siden mangler den).
Resultatet caches i et delt, modul-globalt Map nøkkelet på absolutt URL, slik at flere <lm-link-preview>-forekomster som peker til samme side kun trigger ett nettverkskall for hele sidevisningen.
En feilet henting (f.eks. 404) viser en kort feiltekst i boblen i stedet for tittel/beskrivelse, og cacher ikke det feilede forsøket permanent.
Ekstern/intern avgjøres automatisk ut fra location.origin sammenlignet med lenkens opprinnelse - ingen egen ekstern-attributt å sette manuelt; komponenten reflekterer den beregnede tilstanden som ekstern på selve elementet for styling (:host([ekstern])).

Referanser

Se også:

../../overlegg/tooltip/index.html - brukes i stedet for en kort, ren tekst-forklaring uten lenke/navigering - samme interestfor+popover-mønster, men uten forhåndshenting av innhold.
../../../guider/overlegg/index.html - Full oversikt over dialog/popover-mekanismene og når hvilken passer.

Avhengigheter: designsystem/komponenter/ikon/ikon/