All courses
Resource hub
Featured resource
Tech Upskilling Playbook 2025
Tech Upskilling Playbook

Build future-ready tech teams and hit key business milestones with seven proven plays from industry leaders.

Learn more
Hamburger Icon
  • Course
    • Libraries: If you want this course, consider one of these libraries.
    • Core Tech

Web Components Foundations

This is a beginner-friendly course that will teach you how to make framework-agnostic web components.

Duncan Hunter - Pluralsight course - Web Components Foundations
by Duncan Hunter
Get started

What you'll learn

Too many teams waste time rebuilding UI widgets and keeping styles in sync for every framework at their company. In this course, Web Components Foundations, you'll learn how to make framework-agnostic web components. First, you’ll explore how to make and register a custom element and understand its life cycle methods. Next, you’ll discover shadow DOM for encapsulation and using slots to compose consumer HTML. Then, you'll dive into styling shadow DOM with CSS variables and parts. Finally, you’ll learn to leverage the ElementInternals API to add states and make your custom elements form-associated. When you finish this course, you’ll have the skills and knowledge of web components needed to build reusable framework-agnostic web components to build anything from a single shareable custom button to whole design systems.

Table of contents

About the author

Duncan Hunter - Pluralsight course - Web Components Foundations
Duncan Hunter

Duncan Hunter loves working in awesome teams to make awesome software.

More Courses by Duncan