📍Release stable beta versions of key Web Components

[brunerae]

What

To make it easier to stay up-to-date with the Design System, we'll implement Web Components. In these first four months, we'll lay the groundwork for doing so.

Done when

• We understand the security implications to providing web components
• We've identified which framework we want to use
• We've established beta partners who can help us test
• We have a sequencing plan for how this is applied to Components
• We've alpha tested with one Component

What we're looking for

Use the USWDS Product values to influence our approach.

1. Native or as close to native as possible. Helps us avoid tie in to a specific framework or paradigm.
2. Lightweight and performant.
3. Track record of reliable maintenance. For reliability & security.
4. Easy for users to stay up-to-date with the design system. Minimize markup changes.
5. SCSS support. For theme settings.

2 months

Based on internal mural board FY24 Feb-May Product Increment Planning 🔒.

Jan-Feb

• [x] uswds/uswds-team#305
• [x] uswds/uswds#5719
• [x] uswds/uswds#5639

4 months

Mar-Apr

• [x] uswds/uswds#5640
• [x] Create a separate repo for alpha/beta of web components.
• [x] uswds/uswds#5874
• [ ] uswds/uswds-sandbox#134
• [x] uswds/uswds#5895
• [x] uswds/uswds#5896
• [x] uswds/uswds#5706
• [x] uswds/uswds#5729
• [x] uswds/uswds#5862
• [ ] uswds/uswds-proposals#7
• [x] Create new repo for Web Components - uswds/web-components

6 months

• [ ] uswds/web-components#39
• [ ] uswds/web-components#42
• [ ] Prototype form input uswds/web-components#17
• [ ] uswds/web-components#16
• [ ] uswds/web-components#49
• [ ] uswds/web-components#50
• [ ] uswds/web-components#51

8 months

TK

12 months

TK

[anselmbradford]

Hello, I work on the CFPB design system. How might I follow your work on this issue? Will updates be posted here? Also, are you leaning toward Stencil.js for the framework? Thanks!

[mejiaj]

@anselmbradford appreciate your interest. Are you also using web components? StencilJS is one of the tools we're looking at.

We'll be using this issue to capture all related work. There's also the USWDS Public Roadmap if you're interested in seeing all of the things we're working on.

[anselmbradford]

Are you also using web components?

Not currently, but we've looked into it and are looking to align with your work as it develops. Thanks!

[smorrisods]

Hi there, Scott from the Ontario Design System team here. We're working on web components for our Design System and it has been quite a journey but the tl;dr; is they are pretty awesome! If anyone is interested I'd be happy to connect over this. For more information see:

• Web components | Ontario Design System
• Ontario Design System Web Component Docs

We're constantly improving our documentation, adding more components, refining our patterns and design, and squishing bugs. We're using Stencil.JS as our toolchain and release everything as NPM packages that target HTML, Angular, and React.

Cheers!

[mejiaj]

Hi there, Scott from the Ontario Design System team here. We're working on web components for our Design System and it has been quite a journey but the tl;dr; is they are pretty awesome! If anyone is interested I'd be happy to connect over this. For more information see:

• Web components | Ontario Design System
• Ontario Design System Web Component Docs

We're constantly improving our documentation, adding more components, refining our patterns and design, and squishing bugs. We're using Stencil.JS as our toolchain and release everything as NPM packages that target HTML, Angular, and React.

Cheers!

Hello @smorrisods,

Absolutely, we'd be interesting in connecting! Would you kindly email uswds@gsa.gov so we can get something set up?

[shaal]

Great article by Cory LaViska, author of Shoelace web components library, on Lit - https://www.abeautifulsite.net/posts/building-custom-elements-with-a-library/