Finding Web Components

#webcomponents

If you've been following along with this series of baby steps, you have already tried using a custom element. So far you've only used the web components that we have documented at webcomponents.psu.edu.

This post will get you to find other web components.

Finding Web Component Design Systems

If you're interested in finding a design system, the open-wc keeps a list of web component libraries.

From open-wc's list of web component libraries, click on the link for Adobe's Spectrum Web Components.
Use the left menu to find the card component.
Check out the documentation and demo for the card (sp-card).
Use the left menu to look at the rest of this library.
Go back to open-wc's list of web component libraries and explore more.

Browse some the list and try some of the demos.

Searching by Component

If you're searching for a component to solve a specific problem, try searching webcomponents.org.

From webcomponents.org, use the search to find a slider.
From the search results, select paper-slider. You will be taken to a page describing the paper-slider element.
From the paper-slider page, you can click the Demo link to see the slider demo and its HTML.
Search for webcomponents.org for other web component UI elements that you might want to use.

Once you've found the web components you want to use, you'll need to make your own "magic script" to dynamically import the Javascript files for your collection. Learn how in my next post.

Top comments (3)

𒎏Wii 🏳️‍⚧️ • Oct 22 '20

Possibly relevant

Nikki Massaro Kauffman • Oct 23 '20

This series can address two of those points. I'll be writing more about the others later:

Only one component of a given type in the directory, that is flexible and extensible and continuously iterated on and improved by the community.

Even without web components, there are many libraries and design systems with no canonical system. Instead, newcomers should find a single component library/system until their needs outgrow it.

Plug and play. No dependencies, no setup beyond including one <script> tag.

Our team created an unbundled-webcomponents project that requires a single script. That allows components to be loaded dynamically as needed. In my first post of this series, I show you can use our components with a single script.

What if you are looking for a design system and not the web components we have on our CDN? My third post, shows how you can use unbundled-webcomponents to add any components or component libraries you want to your own server and access them with a single script.