wc-info
wc-info provides some helper resources for a server-side html api that provides UI-friendly views of the custom elements manifest file. The web components it provides are currently deprecated.
NB A great, more fully featured alternative to wc-info is the api-viewer element.
First, a reusable, high performing url can take as a query string parameter a link to any custom elements manifest file, and display it in HTML format:
For example: https://cf-sw.bahrus.workers.dev/?href=https://cdn.skypack.dev/@shoelace-style/shoelace/dist/custom-elements.json
Such links are iframeable.
To see the usage: https://cf-sw.bahrus.workers.dev
Many aspects of the api are customizable, as the usage form indicates.
OpenAPI spec: https://unpkg.com/wc-info/openAPI.json
To embed just the bare minimum html and apply customizations as needed:
Another parameter, "tags" can be used to filter the output, based on a comma delimited list of tags.
Source code for worker: https://github.com/bahrus/cf-sw
To embed this bare minimum html in an existing parent html stream, one of the fastest ways to do this is with the k-fetch web component:
<k-fetch href="https://cf-sw.bahrus.workers.dev/?href=https://cdn.skypack.dev/@shoelace-style/shoelace/dist/custom-elements.json&embedded=true" as=html target=bra-ket-ui5><k-fetch>
Some web component libraries like ui-5, carbon design (and hopefully mwc (status is tbd)) provide support for providing more functionality over the bare-bones html elements this service provides.
The bra-ket web component provides support for this scenario. Display the initial output of the service based on out-of-the-box formatting browsers provide for table elements. Then, once the dependencies of ui-5 are fully downloaded, only then does the initial output get transformed (via xslt) into the equivalent markup using ui-5 components. The transition is almost unnoticeable in high performance scenarios, but makes the loading experience much better on slower devices / networks.
So now the markup looks as follows:
<k-fetch href="https://cf-sw.bahrus.workers.dev/?href=https://cdn.skypack.dev/@shoelace-style/shoelace/dist/custom-elements.json&embedded=true" as=html target=bra-ket-ui5></k-fetch>
<bra-ket-ui5 ></bra-ket-ui5>
Viewing Your Element (locally)
$ npm install
$ npm run serve