Technology independent / possible to use without React

[mimarz]

Issue for everything related to making a web components library.

This needs to be started on after #1045 is finished.
In the future we want components as web components.
Suggested package name: @digdir/designsystemet-webcomponents

Notes:

• Lit, Stenljs, Webc, Enhance or just vanilla Web components?
• What level of custom elements do we want/need?
  • "light" web-components (no shadow dom) seems to be supported at this time.
• The Good, The Bad, and The Web Components
• https://www.spicyweb.dev/web-components-ssr-node/
• https://nordhealth.design/
• https://eisenbergeffect.medium.com/2023-state-of-web-components-c8feb21d4f16
• https://nldesignsystem.nl/events/design-systems-week-2023/en/program/
• https://opensource.adobe.com/spectrum-web-components/index.html
• https://www.matuzo.at/blog/2023/web-components-accessibility-faq/
• https://opensource.adobe.com/spectrum-web-components/index.html
• https://blog.jim-nielsen.com/2023/html-web-components-an-example/
• https://adactio.medium.com/html-web-components-0c80a0fc58be

[poi33]

Any update on this? I don't mind creating an proof of concept with some of the existing components.
I'm hoping for webcomponents as our current design system is not react based. So adopting it would make it a lot easier.

[mimarz]

Any update on this? I don't mind creating an proof of concept with some of the existing components. I'm hoping for webcomponents as our current design system is not react based. So adopting it would make it a lot easier.

Hey @poi33!

Nice to hear you want to make use of Designsystemet :)

We don't have a set timeframe for when we are going to start looking at this, as its more x and y needs to be done first.

We have currently postponed the release of V1, to include the CSS component library (#1045). This will server as the basis for all our components, be it HTML, React, Web components or any other implementation.

Starting work on Web components now might be a bit premature as the css is still in change. There is also the question of what should and should not be a web component? What can be solved with just pure HTML + CSS?

In addition we also have our design-tokens, Figma and theming support which needs to be completed, so things are cooking! 🧑‍🍳

[skjalgsm]

Hvorfor utsetter dere dette? Det har vel gått to år nå. Dere burde ihvertfall ta en beslutning om dere skal gjøre noe for å støtte noe annet enn React når det gjelder komponenter.

Om dere går for f.eks stensiljs (slik svenskene har gjort https://designsystem.arbetsformedlingen.se/) så kommer dere mest sannsynligvis til å ende opp med å skrote alt arbeidet dere gjør med react-komponentene deres for at komponentbibliotekene på tvers av f.eks angular og react skal bli likt og at dere skal slippe å vedlikeholde to pakker med komponenter.

Så da er spørsmålet egentlig, hvorfor fortsetter dere å gå ned den potensielle blindgaten det er å flikke mer på react-komponentene når dere heller burde bruke tiden på noe som både potensielt alle kan bruke og ikke bare react-baserte apps?

Worst case scenario her er jo at dere over tid utvikler komponenter i web components som er bedre og mer oppdatert og det react-spesfikke komponentbiblioteket henger etter, også blir porting fra gammelt til nytt vanskelig for alle som er early adopters.

[Barsnes]

Hvorfor utsetter dere dette? Det har vel gått to år nå. Dere burde ihvertfall ta en beslutning om dere skal gjøre noe for å støtte noe annet enn React når det gjelder komponenter.

Om dere går for f.eks stensiljs (slik svenskene har gjort https://designsystem.arbetsformedlingen.se/) så kommer dere mest sannsynligvis til å ende opp med å skrote alt arbeidet dere gjør med react-komponentene deres for at komponentbibliotekene på tvers av f.eks angular og react skal bli likt og at dere skal slippe å vedlikeholde to pakker med komponenter.

Så da er spørsmålet egentlig, hvorfor fortsetter dere å gå ned den potensielle blindgaten det er å flikke mer på react-komponentene når dere heller burde bruke tiden på noe som både potensielt alle kan bruke og ikke bare react-baserte apps?

Worst case scenario her er jo at dere over tid utvikler komponenter i web components som er bedre og mer oppdatert og det react-spesfikke komponentbiblioteket henger etter, også blir porting fra gammelt til nytt vanskelig for alle som er early adopters.

Hei, kjekt at du er interressert i web komponenter!
Det er per dags dato ikkje tatt ein beslutning på web components, rett og slett fordi før V1 (som kom i Mars) måtte me fokusere på det me hadde, uten å utsette meir. Me har/hadde heller ikkje ressursar nok til å lage eit web components bibliotek.

I kombinasjon med det, så blei mykje skrive om så du kan bruke mesteparten uten react, men med rein CSS.
Mange av komponentane våre treng ikkje å være web components, for eksempel Paragraph, Tag, Input, Fieldset, Spinner, Button, Link og Details (++). Rett og slett fordi desse kun treng eit klassenavn.

Det er laga til ein intern playground for oss her: https://github.com/digdir/designsystemet/tree/main/packages/wc, men legg merke til README.

Me har diskutert dette internt ein del, men kan ikkje fokusere på dette per dags dato.
Om/når me ein dag får web components, så vil react-biblioteket fortsatt eksistere, mest sannsynlig - og desse vil då ta i bruk web komponentane som er laga, så klart.

Så da er spørsmålet egentlig, hvorfor fortsetter dere å gå ned den potensielle blindgaten det er å flikke mer på react-komponentene når dere heller burde bruke tiden på noe som både potensielt alle kan bruke og ikke bare react-baserte apps?

Mykje av oppdateringane våre i det siste har vært for CSS, der react-komponentane må følge med, sjå gjerne gjennom våre endringsloggar. https://github.com/digdir/designsystemet/releases

---

Så kan eg og nevne at me jobbar med ny dokumentasjon, som me håpar kjem ut før jul, der HTML/CSS blir betre dokumentert enn det er i dag.