2 Libraries of pre-written web components

It isn’t necessary to hand-code every web component needed by a web app. Many general purpose web components are available in open source libraries. For a list of some popular libraries, see Community: Component Libraries. Examples include FAST from Microsoft, UI Components from Ionic, and Web Awesome from Font Awesome.

Using these libraries saves time and can improve quality. First, you save the time it would take to implement them from scratch. Second, you save debugging time because web components in popular libraries have already been battle-tested by other developers. Finally, using web components from a single library gives user interfaces a more consistent look and feel because the components are designed by the same team.

Good libraries of web components support style customization. Multiple web apps that use the same library of web components aren’t forced to use the same, default look.

At a minimum, web developers should familiarize themselves with Web Awesome’s collection of web components. It’s one of the most popular web component libraries.

2.1 Web Awesome

Web Awesome is the new name for the Shoelace web component library which was first released in 2020. It’s maintained by Font Awesome which offers a library of over 60,000 free and paid icons. Web Awesome currently provides over 50 web components.

2.2 Using Web Awesome components

2.3 Overview of Web Awesome components

2.4 Styles, themes, and design tokens

2.5 Layout CSS classes

2.6 Sample project

2.6.1 wa-radio-group and wa-radio

2.6.2 wa-input and wa-relative-time

2.6.3 wa-button, wa-badge, and wa-switch

2.6.4 Retrieving messages

2.6.5 wa-dialog

2.6.6 wa-drawer

2.6.7 wa-progress-bar and wa-progress-ring

2.6.8 wa-rating

2.6.9 Complete app

2.7 What could go wrong?