USWDS - Sandbox: Prep sandbox environment for web components

[mejiaj]

Modify 11ty environment to support web components.

[heymatthenry]

I spun up a little sample page in the sandbox on Pages that shows a few flavors of web components running in the sandbox. Arguably the coolest one is the simplified usa-link (source):

You can see what it looks like in this screenshot 💅🏻

Some things to observe about this version of usa-link:

• It's rendered statically at build time
• Styles are scoped to the component (and those style include css custome property versions of our design tokens). You can see those styles in the screenshot in the focus outline.

I definitely don't want to suggest that webc is the way we should be doing web components, but it's a way, and it works in eleventy with minimal additional overhead.

There are a couple of other web components on the page, and they're examples of:

• how a vanilla (non-webc) web component can be run as client side JS from the assets directory; and
• how CDN-hosted web components mostly ✨just work✨ .