<lm-kode-lekeplass> – Kode-lekeplass / Code playground

Om komponenten

Kanonisk navn

<lm-kode-lekeplass>

Synonymer

live preview, code playground, kjørbar kodeeksempel, prøv selv, editable demo, CodePen-stil

Kategori

utvikling

ARIA-mønster

Ikke aktuelt - Ingen etablert APG-widget dekker «rediger kode, se live resultat». <textarea> er et native, fullt tilgjengelig skjemafelt med egen etikett, og js-resultatflaten bruker aria-live="polite" slik at skjermlesere får vite når returverdien endrer seg - de eneste ARIA-relevante delene er dermed allerede dekket av native semantikk og en enkel live-region, ikke et helhetlig interaksjonsmønster.

Parts

lekeplass, resultat, forhandsvisning, js-resultat, rediger, etikett, editor, tilbakestill-knapp

Native-first-vurdering

Ingen native mekanisme kan kjøre redigert kode og vise et levende resultat - selve kjøre-/rendre-logikken (dynamisk import() av script-src-er i markupet, og Function-evaluering av et JS-uttrykk mot navngitte modul-eksporter) må skje i JS. Komponenten holder seg likevel native-first der det er mulig: kildekoden lagres i et natively inert <template> (for html) eller <script type="text/plain"> (for js) i stedet for en dataattributt eller escapet streng, og selve redigeringsfeltet er en ren <textarea> uten noe editor-bibliotek.

Nettleserstøtte

Bruker kun customElements, Shadow DOM, konstruerbare stilark, <template> og dynamisk import() - støttet i nyeste Chrome/Safari uten fallback.

Design-tokens

var(--font-family-mono, ...), var(--font-kode, ...), var(--space-small, ...), var(--space-medium, ...), var(--radius-small, ...), var(--border-color, ...), var(--border-width, ...), var(--color-surface, ...), var(--color-surface-muted, ...), var(--color-feil, ...), var(--color-focus-ring, ...)

Sist endret

20. september 2026

Brukt

Ikke i bruk andre steder ennå

Formål

Gjør et kodeeksempel i designsystem-dokumentasjonen kjørbart og redigerbart: brukeren ser umiddelbart hvordan en endring i markup (modus="html") eller i et funksjonskall (modus="js") påvirker resultatet, uten å måtte forlate siden eller åpne et eget verktøy. Brukes utelukkende av generer-designsystem-dokumentasjon.js, som seeder startkoden fra hver komponent-/funksjonsmanifests eksempler.

Egner seg for

• "Prøv selv"-seksjoner på komponent- og funksjonsdokumentasjonssider, der startkoden allerede finnes som et eksempel i manifestet.
• Korte, selvstendige kodeeksempler - et markup-utsnitt som kun bruker attributter/slots, eller et enkelt funksjonskall som ikke krever eksterne DOM-elementer/filer utenfor selve eksempelet.

Egner seg ikke for

• Fullverdig kodeeditering med syntaksmarkering, autofullføring eller flere filer - da trengs et ekte editor-bibliotek (CodeMirror/Monaco), noe som bevisst er unngått her for å holde komponenten enkel og avhengighetsfri.
• Eksempler som krever et reelt DOM-element utenfor selve kodeutsnittet (f.eks. en fil valgt av brukeren, eller et skjema definert andre steder på siden) - disse dokumenteres fortsatt med det statiske kodeeksempelet, uten en kjørbar lekeplass.

Bruk

Genereres normalt automatisk av generer-designsystem-dokumentasjon.js for hver komponent-/funksjonsside, men kan også settes opp for hånd - startkoden bestemmes av hvilket barn (<template> eller <script type="text/plain">) som ligger i lys-DOM.

HTML-modus - rediger markup, se resultatet live

<script type="module" src="/designsystem/komponenter/utvikling/kode-lekeplass/kode-lekeplass.js"></script>

<lm-kode-lekeplass modus="html">
    <template>
<script type="module" src="/designsystem/komponenter/handling/button-group/button-group.js"></script>

<lm-button-group align="end">
    <button type="button">Avbryt</button>
    <button type="button">Lagre</button>
</lm-button-group>
    </template>
</lm-kode-lekeplass>

JS-modus - rediger et funksjonskall, se returverdien live

<lm-kode-lekeplass modus="js" modul="/designsystem/funksjoner/formattering/format-currency/format-currency.js">
    <script type="text/plain">formatCurrency(1250.5, "NOK");</script>
</lm-kode-lekeplass>

Attributter

Slots

Parts

Styling med ::part()

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

lm-kode-lekeplass::part(lekeplass) {
    /* egne stiler for "Den ytre rammen rundt resultat og editor." */
}

lm-kode-lekeplass::part(resultat) {
    /* egne stiler for "Beholderen for resultat-flaten (forhåndsvisning eller js-resultat)." */
}

lm-kode-lekeplass::part(forhandsvisning) {
    /* egne stiler for "Flaten som rendrer redigert markup i `modus="html"`." */
}

lm-kode-lekeplass::part(js-resultat) {
    /* egne stiler for "`<pre>`-elementet som viser returverdi/feilmelding i `modus="js"`." */
}

lm-kode-lekeplass::part(rediger) {
    /* egne stiler for "Beholderen for editor-etikett, tekstfelt og tilbakestill-knapp." */
}

lm-kode-lekeplass::part(etikett) {
    /* egne stiler for "Etiketten rundt editor-tekstfeltet." */
}

lm-kode-lekeplass::part(editor) {
    /* egne stiler for "`<textarea>`-en brukeren redigerer koden i." */
}

lm-kode-lekeplass::part(tilbakestill-knapp) {
    /* egne stiler for "Knappen som setter koden tilbake til startverdien." */
}

Tilgjengelighet

Editor-tekstfeltet har en synlig, tilknyttet <label>. Resultatet i modus="js" har aria-live="polite" slik at skjermlesere får returverdien/feilmeldingen lest opp etter en redigering. modus="html" sin forhåndsvisningsflate har ikke aria-live, siden den kan inneholde vilkårlig, ofte visuelt orientert markup der kontinuerlige opplesninger av hver tastetrykk-drevne endring ville vært støy - den statiske kodeblokken over lekeplassen dekker det tekstlige innholdet for skjermleserbrukere.

Referanser

Se også:

• ../../ikon/ikon/index.html - Det eneste tidligere eksempelet på et levende, kjørende demo-element i dokumentasjonen (ikon-galleriet) - denne komponenten generaliserer samme idé.

Avhengigheter: Ingen