Skip to content

Webcomponents

Web Components are reusable pieces of code that let you create your own custom HTML elements. Think of them like bricks for your website. Each brick (or component) is its own self-contained unit with its own specific style and functionality, like a search bar or a product card.

This approach makes it much easier to build and maintain your store. Instead of writing the same complex code over and over, you can just use your custom component wherever you need it. Because they are completely independent, a change to one component won't accidentally break anything else on your page. This keeps your code clean, organized, and much simpler to manage.

Why Use Web Components?

  • Consistency - Since every feature like a product card or image gallery is a pre-built component, your store has a consistent look across all pages. Accessibility standards across all webcomponents are also ensured to make them usable by everyone.
  • Reliability - Each component is a self-contained piece of functionality. This design greatly reduces the risk of conflicts between different features on your store, leading to fewer bugs and a smoother experience for your customers.
  • Accessibility - Accessibility standards across all webcomponents are ensured and maintained to make them usable by everyone.
  • Easy Updates - When we improve or fix a component, the update applies everywhere that component is used. You get the latest features and fixes automatically without having to adjust it manually.

Events

For our components to be useful, they need a way to talk to each other. For example, a h-color-swatch component needs to tell a product-image component which image to display. We handle this communication using a system of events and buses.

Buses

Buses are tools that help different parts of an application communicate without being directly connected. There are three main types of buses we use: Event Bus, Command Bus, and Query Bus. Each type has a specific job and helps keep the parts of the application independent, making the system easier to maintain and scale.

Read more about buses on the Buses documentation page