Klikk på bildet eller trykk Escape for å lukke

Mange har spurt om Designsystemet kjem til å tilby webkomponentar slik at ein kan bruke komponentane utan React. Svaret er ja! Men ikkje alt vil vere webkomponentar. La oss forklare kvifor, og kva me planlegg:

Standardar er bra for alle

Sidan starten har målet vore å nytte webstandardar så langt det let seg gjere, slik at Designsystemet kan brukast både i gamle og nye løysingar, uavhengig av teknologi og rammeverk. Mange av komponentane fungerer faktisk allereie i rein HTML. Eit godt døme er knappekomponenten:

I HTML-versjonen nyttar vi standard klassenamn og data-attributt. Ikkje berre fungerer dette i alle rammeverk og like godt både på server og i nettlesar - det fungerer òg for alle brukarar! Standard HTML har nemleg innebygd støtte for skjermlesarar, tastaturnavigasjon og andre hjelpeteknologiar, utan behov for ekstra tilpassingar.

Kvifor ikkje lage alt som webkomponentar?

Webkomponentar er ein relativt ny standard som gjer det mogleg å lage eigne HTML-element med innkapsla funksjonalitet og stil ved hjelp av JavaScript. Sjølv om det kan verke freistande å lage webkomponentar av alt, til dømes ein eigen knapp:

...ville dette ført til at vi mistar mykje av den innebygde tilgjengelegheita som vanleg HTML gir oss gratis. I tillegg får vi dårlegare ytelse, sidan vi blir avhengige av JavaScript, og du som utviklar kan ikkje lenger nytte HTML-dokumentasjon for å forstå koden.

Kort sagt: Mange komponentar treng - og bør - rett og slett ikkje vere webkomponentar. Moderne CSS med klassenamn og data-attributt, gir i mange tilfelle både betre fleksibilitet og betre ytelse.

Kva komponentar vil bli webkomponentar?

Komponentar som i dag nyttar React for å implementere logikk, vil bli tilgjengelege som webkomponentar. Til dømes vil <ds-field> kople saman skjemafelt med <label> og feilmeldingar, og <ds-tabs> vil handtere tab-navigasjon og tilhøyrande innhald.

Andre komponentar, som Popover og Dialog, treng ikkje bli webkomponentar, fordi web standarden allereie tilbyr events eller moderene command-attributtar (chrome.com) (med tilhøyrende polyfill (github.com)) som vi kan nytte for å hjelpe med opning og lukking, og plassering.

Uavhengig av teknisk løysing vil alle komponentane vere baserte på rein HTML, fungere på tvers av teknologiar og ha det same API-et: Du nyttar klassenamn for å velje komponent, og data-attributt for å styre innstillingar og åtferd.

Tidslinje og innspel!

Arbeidet med å gjere Designsystemet tilgjengeleg utan React startar januar 2026. Me vil fortløpande leggje ut eksperimentelle versjonar, slik at du raskt kan teste og kome med tilbakemeldingar.

Har du innspel eller tankar, set vi stor pris på om du deler dei med oss - anten på GitHub eller på Slack.

Bidragsytere

Tobias BarsnesEirik Backer