digdir
Web components library
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
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.
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! 🧑🍳
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.
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.
Update 2025.11.19: We had a planned team gathering, and have decided to go forward with web components 🚀 Some things are still undecided, like what components we should provide. This investigation will be started in about a month.
We'll release this as a separate package, with the package being experimental/beta to begin with. The beta/experimental release of this can be expected dec 25/jan 26.
Excact implementation is yet to be decided.
Om dere trenger litt erfaringsutveksling (og en rant om hvorfor Oslo kommunes designsystem Punkt har både React- og custom elements-pakker), så dere slipper å gå i samme fellene som vi sliter med å komme oss ut av, kan dere gjerne ta kontakt med meg på Slack så kan vi slå av en prat!
Men jeg vet jo at med Backer på laget så har dere jo en voldsom kompetanseressurs allerede…
Om dere trenger litt erfaringsutveksling (og en rant om hvorfor Oslo kommunes designsystem Punkt har både React- og custom elements-pakker), så dere slipper å gå i samme fellene som vi sliter med å komme oss ut av, kan dere gjerne ta kontakt med meg på Slack så kan vi slå av en prat!
Takk @schjetne , så hyggelig at du foreslår det! Har du mulighet til å dele noen av de viktigste erfaringene direkte her i tråden? Tenker kanskje det kan være nyttig for flere som følger arbeidet. 🙂
Takk @schjetne , så hyggelig at du foreslår det! Har du mulighet til å dele noen av de viktigste erfaringene direkte her i tråden? Tenker kanskje det kan være nyttig for flere som følger arbeidet. 🙂
Jeg skal gruble på det! Jeg har en liste over ting jeg angrer på som kunne vært nyttig å vurdere. Skal notere noen punkter og dele her snarlig :)