Learn Web Components `page`

This course covers the essentials for building Web Components.

Before you begin

Join the Bitovi Community Discord to get help on Bitovi University courses or other Angular, React, CanJS and JavaScript problems.

Please ask questions related to Web Components in the JS and DOM chat room.

If you find bugs in this training or have suggestions, create an issue or email contact@bitovi.com.

This guide begins with Why Web Components might be a good choice for building your next widget. Following lessons will cover:

Building our first component to learn the APIs & display a greeting.
Writing a template to create reusable DOM for use within your components.
Creating a component to hold our Google Map View.
Building a more complex bus-tracker component that combines the usage of <template> and customElements, and sets up event listeners.
Fetching and listing routes from the CTA bus tracker API.
Using event listeners with a custom element to handle a user selecting a route.
Listen to changes in properties on custom elements and properly reflect back property values to display markers for vehicles.
Use CSS properties to customize header styles within Shadow DOM.
Use slotted content to allow more control over non-critical parts of your component.
And finally, dispatching events to provide information on the state of your component to parent elements.

The end result of this training will be a CTA Bus tracker widget that can be embedded in any website with just a script tag and an element like so:

<cta-bus-tracker></cta-bus-tracker>

CTA bus tracker web component

✏️ Head over to the first lesson and learn more about Web Components.