USWDS Sandbox: test Stencil + Lit component composition

[heymatthenry]

This branch demonstrates how Lit-based USWDS web components can be used inside Stencil components. It uses the default component that Stencil generates when creating a new project, but consumes the usa-link component from @uswds/web-components.

Here, the basic Stencil my-component component contains the usa-link component:

The end result looks like this:

The only changes to my-component are:

1. the addition of a href prop, to show how props can be passed through to Lit components; and
2. A connectedCallback lifecycle method which checks whether the usa-link component is defined in the custom element registry, and defines it if it isn't.

Local testing

To test it yourself, just check out this branch and then install its dependencies:

npm i

Then you can spin up the Stencil dev server.

npm run start

If you want to confirm that everything works outside of the Stencil dev server, just build the site:

npm run build

and then serve the static files however you choose. For instance, you can do the following

cd _site
npx serve .