In a previous article, I gave a brief introduction to React. This tutorial introduces an alternative approach to building a component-based frontend. It covers the fundamentals of Web Components to build modular, reusable elements for your web applications.
Web Components are a set of standardized browser APIs that allow you to create custom, reusable HTML elements with encapsulated functionality. They help developers create self-contained components that can be used across different frameworks or even without any framework at all.
This tutorial assumes you have some basic programming experience and are comfortable reading and writing JavaScript. You should understand variables, functions, loops, objects, classes, and how JavaScript works in the browser. You don’t need to know anything about Web Components to get started.
The four lessons presented here are taken from my free book of code playbacks:
An Introduction to Web Development from Back to Front
By Mark Mahoney
This book is available for free on Playback Press. The book is a hands-on guide to modern web development, covering everything from core JavaScript features to building full-stack apps with various tools and technologies.
Each lesson is presented as a code playback, which is an interactive code walkthrough that shows how a program changes over time along with my explanation about what’s happening. This format helps you focus on the reasoning behind the code changes.
To view a playback, click on the comments in the left panel. Each comment updates the code in the editor and highlights the change. Read the explanation, study the code, and use the built-in AI tutor if you have questions. Here’s a short video that shows how to use a code playback:
After this introduction, you might want to explore the official Web Components resources: MDN Web Components Guide.
Table of Contents
Web Components Part 1: Your First Custom Element
This first lesson introduces building user interfaces using Web Components, which let you bundle together HTML, CSS, and JavaScript into a single reusable element.
These elements can be treated just like built-in HTML elements such as h1, div, and img. They’re particularly useful when you want to break a page into smaller, self-contained, and reusable parts like headers, tables, or forms, while keeping the code for each organized and isolated.
In this playback, you’ll learn:
-
How to create a JavaScript class that represents a custom HTML element
-
How to access the attributes of the web component
-
How to create and use a web component in HTML
The lesson focuses on creating a LegendHeader component that can be reused throughout a web application. You’ll see how custom elements can have attributes just like regular HTML elements (such as src in an img tag), and how these attributes can be changed from JavaScript code, triggering methods in response.
View the playback here: Web Components Part 1- LegendHeader
Web Components Part 2: Data Communication
Building on the previous lesson, this playback demonstrates how to create multiple components that share data. I’ll enhance the LegendHeader component to display the count of legends being tracked, and add a new LegendTable component that displays all the CS legends in a database using an HTML table.
A key concept introduced in this lesson is having a top-level element hold the web app’s data and letting it communicate changes to the components that rely on it. This approach makes component management more organized and maintainable.
In this playback, you’ll learn:
-
How to create and work with multiple components
-
How to set up and use ‘observable attributes’ in a web component
-
How a top-level element can manage data and inform components when data changes
View the playback here: Web Components Part 2- LegendTable
Web Components Part 3: Custom Events
This lesson expands the application by adding a NewLegendForm component that allows users to add new legends to the database. The playback introduces the concept of custom events that ‘bubble’ up through the DOM, enabling top-level elements to control requests for data.
You’ll learn why it’s often better for components not to manage app-wide data themselves. Having a top-level element manage the entire web app’s data makes components simpler and more reusable, as they don’t need to know about each other or communicate directly.
In this playback, you’ll learn:
-
How components can generate custom events to request data instead of managing it themselves
-
How a top-level element can listen for events and handle them
-
How a top-level element accesses data and passes it to components that need it
View the playback here: Web Components Part 3- NewLegendForm
Web Components Part 4: Building a Complete App
In this final lesson, I bring everything together to create a complete application with authentication. I’ll add a new AuthBox component and implement a light authentication system so that only registered, logged-in users can add new legends to the database.
The playback uses sessions on the server to control user access and reinforces the importance of centralized data management in component-based architecture.
In this playback, you’ll learn:
-
How to implement user authentication with a web component
-
How to integrate all components into a complete, functional application
-
Best practices for data management in component-based web applications
View the playback here: Web Components Part 4- AuthBox
React vs Web Components Comparison
Some of the main differences between React and web components can be summarized like this:
| Key Property | React | Web Components |
| Component Definition | Uses functions (typically) to define components | Uses JavaScript classes that extend HTMLElement |
| Tooling Requirements | Requires tools for installation, transpilation, bundling (npm, webpack, babel, and so on) | Native browser support with no build tools or installation required |
| Template Syntax | Uses JSX, an HTML-like syntax within JavaScript | Uses standard HTML in strings or HTML templates |
| DOM Updates | Uses Virtual DOM to efficiently batch and minimize actual DOM manipulations | Directly manipulates the DOM, typically less optimized for frequent updates |
| Property Types | Accepts various data types as props (strings, arrays, objects, functions) | Only accepts strings as attributes in HTML |
| Rendering Model | Declarative: describe what the UI should look like, React handles updates | More imperative: directly manipulate the DOM in response to changes |
| Style Encapsulation | No built-in style encapsulation (requires CSS-in-JS or CSS Modules) | Built-in style encapsulation with Shadow DOM |
| Browser Support | Works in all browsers via polyfills | Modern browsers only (may require polyfills for older browsers) |
| Ecosystem | Large ecosystem with many libraries and tools | Smaller ecosystem, but growing |
Wrapping Up
These four lessons cover the fundamentals of Web Components, but there’s much more to explore. Web Components provide a standards-based way to create reusable elements without the need for external libraries or frameworks, making them particularly valuable for building maintainable and portable code.
If you found this format helpful, explore the rest of the book to see how full web apps are built from scratch using modern tools and approaches.
Web Components represent just one approach to component-based web development. Keep building, keep reading, and try out the other playbacks when you’re ready to go further.
If you have feedback about the playbacks I’d love to hear from you. You can reach me here mark@playbackpress.com.
Source: freeCodeCamp Programming Tutorials: Python, JavaScript, Git & MoreÂ