<lm-feed> – Strøm / Feed

Om komponenten

Kanonisk navn: <lm-feed>
Synonymer: nyhetsstrøm, uendelig liste, infinite scroll, feed
Kategori: innhold
ARIA-mønster: Feed
Parts: feed
Native-first-vurdering: HTML har ingen native "feed"-semantikk eller Page Up/Down-navigasjonsmodell for lange, dynamisk voksende lister - komponenten legger derfor til nøyaktig dette laget rundt vanlige slottede innholdsblokker.
Nettleserstøtte: Ingen spesielle forbehold - kun bredt støttede, stabile plattform-API-er.
Design-tokens: var(--color-focus-ring, ...), var(--space-medium, ...), var(--radius-medium, ...), var(--border-width, ...)
Sist endret: 19. september 2026
Brukt: Ikke i bruk andre steder ennå

Formål

En kontinuerlig rullende strøm av innholdsblokker - f.eks. en transaksjonslogg som laster inn flere elementer etter hvert som brukeren scroller. Implementerer ARIA APG sitt Feed-mønster: role="feed" med role="article"-barn (aria-posinset/aria-setsize satt automatisk), og Page Down/Page Up flytter fokus rett til neste/forrige artikkel i stedet for at Tab må gå gjennom alt fokuserbart innhold underveis.

Egner seg for

Uendelig-scroll-lister der nytt innhold lastes inn dynamisk (transaksjoner, hendelseslogger, aktivitetsstrømmer).
Lange lister med rikt, fokuserbart innhold per element (lenker, knapper) der skjermleserbrukere har nytte av å hoppe forbi hele elementer i stedet for hvert enkelt fokuserbare understeg.

Egner seg ikke for

Korte, statiske lister uten dynamisk lasting - en vanlig <ul> er enklere og tilstrekkelig.
Tabelldata med rader/kolonner - bruk <lm-data-table>.

Bruk

<script type="module" src="/designsystem/komponenter/innhold/feed/feed.js"></script>

<lm-feed etikett="Transaksjoner">
    <article>
        <h3>Kaffe</h3>
        <p>-45 kr - i går</p>
    </article>
    <article>
        <h3>Lønn</h3>
        <p>+32 000 kr - 1. i måneden</p>
    </article>
</lm-feed>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Standard	Beskrivelse
`etikett`	`string`	"Strøm"	Attributt/property. Beskrivende `aria-label` for hele strømmen (f.eks. "Transaksjoner").
`laster`	`boolean`	false	Attributt/property. Settes mens flere elementer lastes inn (f.eks. under uendelig scroll) - reflekteres som `aria-busy`.

Slots

Slot	Beskrivelse
(standard)	Innholdsblokkene i strømmen - hvert direkte barn blir automatisk en `role="article"`-artikkel.

Parts

Part	Beskrivelse
`feed`	Wrapperen med `role="feed"`.

Styling med ::part()

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

lm-feed::part(feed) {
    /* egne stiler for "Wrapperen med `role="feed"`." */
}

Tilgjengelighet

Wrapperen har role="feed" og en beskrivende aria-label. Hvert direkte barn får role="article", aria-posinset og aria-setsize automatisk. laster reflekteres som aria-busy="true" mens nytt innhold lastes. Page Down/Page Up flytter fokus mellom artiklene; Ctrl+Home/Ctrl+End hopper til første/siste.

role="feed" på wrapperen, role="article" på hvert direkte barn - forbrukeren trenger ikke sette disse selv.
aria-posinset/aria-setsize oppdateres automatisk når elementer legges til eller fjernes (via slotchange).
Page Down flytter fokus til neste artikkel, Page Up til forrige - dette lar skjermleserbrukere hoppe forbi en artikkels interne, fokuserbare innhold (lenker/knapper) i stedet for å måtte Tab seg gjennom alt.
Ctrl+Home/Ctrl+End flytter fokus til første/siste artikkel i strømmen.

Detaljer

Selve innlastingen av nye elementer (f.eks. via IntersectionObserver på et "last mer"-sentinel-element) er konsumentens ansvar - komponenten setter kun laster/aria-busy og feed-semantikken rundt innholdet forbrukeren allerede har lagt til.

Referanser

Se også:

../data-table/index.html - brukes for tabellformede data i stedet for en fritt strømmende liste av innholdsblokker.

Avhengigheter: Ingen