Evaluate SSG/SSR possibilities for custom elements

[heymatthenry]

The next version of the Design System should have a story about fully static and/or server-generated markup. This issue will track how various web component frameworks and tools help to write that story.

Lit provides a SSR plugin, though it remains in "Lit Labs," so its documentation warns of potential breaking changes. Hopefully, now that Declarative Shadow DOM has shipped in the main evergreen browsers, that will cut down on the risk of that happening.

Despite the "Labs" status, eleventy and Astro have both have plugins using lit-ssr to support SSG/SSR of Lit-based components:

• eleventy-plugin-lit
• Astro + Lit

There are very basic "hello, world" style minimal test sites built with lit-ssr in these branches:

• Eleventy
• Astro

Both support zero client-side JavaScript builds of a minimal page with a usa-link component, while still providing the benefits of scoped styles via shadow DOM:

Screen.Recording.2024-05-13.at.6.37.40.PM.mov

The recording just shows that the focus styles are correctly scoped to the one link that uses the usa-link component, and don't affect the other link.