docs(blog): post about web components, or non-react, in DS (#4289)

Co-authored-by: eirikbacker <eirik.backer@mattilsynet.no>

Author: Barsnes

apps/www/app/content/blog/en/web-components-and-designsystemet-without-react.mdx

@@ -0,0 +1,71 @@
+---
+title: Web components and Designsystemet without React
+description: Soon you can use Designsystemet with both Svelte, Vue, Angular and all other technologies - also pure HTML and CSS. How will this be?
+date: 2025-12-17
+author: Designsystem
+imageSrc: /img/blog/web-components-25-en.png
+imageAlt: Illustration of web components
+---
+
+Many have asked if Designsystemet will offer web components so that you can use the components without React. The answer is yes!
+But not everything will be web components. Let us explain why, and what we plan:
+
+## Standards are good for everyone
+
+Since the beginning, the goal has been to use web standards as much as possible, so that Designsystemet can be used in both old and new solutions,
+regardless of technology and framework. Many of the components actually already work in pure HTML. A good example is the button component:
+
+```jsx
+// React:
+<Button variant="secondary">Click me</Button>
+
+// HTML:
+<button class="ds-button" data-variant="secondary">Click me</button>
+```
+
+In the HTML version, we use standard class names and data attributes.
+Not only does this work in all frameworks and equally well on both the server and in browsers - it also works for all users!
+Standard HTML has built-in support for screen readers, keyboard navigation, and other assistive technologies, without the need for additional customizations.
+
+## Why not make everything as web components?
+
+Web components are a relatively new standard that makes it possible to create your own HTML elements with encapsulated functionality and style using JavaScript.
+Although it may seem tempting to create a web component out of everything, for example a custom button:
+
+```html
+<ds-button data-variant="secondary">Click me</ds-button>
+```
+
+...this would cause us to lose much of the built-in accessibility that regular HTML gives us for free.
+In addition, we get worse performance, since we become dependent on JavaScript, and you as a developer can no longer use HTML documentation to understand the code.
+
+In short: Many components simply do not need to - and should not - be web components.
+Modern CSS with class names and data attributes, in many cases provides both better flexibility and better performance.
+
+## Which components will become web components?
+
+Components that currently use React to implement logic will be made available as web components.
+For example, `<ds-field>` will connect form fields with `<label>` and error messages, and
+`<ds-tabs>` will handle tab navigation and associated content.
+
+Other components, such as `Popover` and `Dialog`, do not need to become web components, because the web standard already
+offers `events` or the [`command` attributes (chrome.com)](https://developer.chrome.com/blog/command-and-commandfor) (with associated [polyfill (github.com)](https://github.com/keithamus/invokers-polyfill)) that we can use to help with opening and closing, and positioning.
+
+Regardless of the technical solution, all components will be based on pure HTML,
+work across technologies, and have the same API:
+You use class names to select components, and data attributes to control settings and behavior.
+
+## Timeline and input!
+
+The work to make Designsystemet available without React will start in January 2026.
+
+We will continuously release experimental versions so you can quickly test and provide feedback.
+
+If you have any input or thoughts, we would greatly appreciate it if you would share them with us - either on [GitHub](https://github.com/digdir/designsystemet) or on [Slack](/slack).
+
+<Contributors
+  authors={[
+    'Tobias Barsnes',
+    'Eirik Backer',
+  ]}
+/>

apps/www/app/content/blog/no/web-components-and-designsystemet-without-react.mdx

@@ -0,0 +1,68 @@
+---
+title: Webkomponentar og Designsystemet utan React
+description: Snart kan du bruka designsystemet med både Svelte, Vue, Angular og alle andre teknologiar - også rein HTML og CSS. Korleis blir dette?
+date: 2025-12-17
+author: Designsystemet
+imageSrc: /img/blog/web-components-25-no.png
+imageAlt: Illustrasjon av webkomponentar
+---
+
+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:
+
+```jsx
+// React:
+<Button variant="secondary">Klikk meg</Button>
+
+// HTML:
+<button class="ds-button" data-variant="secondary">Klikk meg</button>
+```
+
+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:
+
+```html
+<ds-button data-variant="secondary">Klikk meg</ds-button>
+```
+
+...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)](https://developer.chrome.com/blog/command-and-commandfor) (med tilhøyrende [polyfill (github.com)](https://github.com/keithamus/invokers-polyfill)) 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](https://github.com/digdir/designsystemet) eller på [Slack](/slack).
+
+<Contributors
+  authors={[
+    'Tobias Barsnes',
+    'Eirik Backer',
+  ]}
+/>