Updated June 2026

Introduction to Web Components

Class Duration

14 hours of live training delivered over 2 days.

Student Prerequisites

Experience with modern JavaScript or TypeScript
Experience with web browser programming

Target Audience

Web developers who want a deep understanding of Web Components and the skills to build encapsulated, reusable UI with the platform's standards - Custom Elements, Shadow DOM, and HTML Templates. All attendees should have experience with modern JavaScript or TypeScript and web browser programming. Teams continuing on can move to Professional Web Components.

Description

Embark on a transformative journey into modern web development with our "Introduction to Web Components" course, discovering the fundamental concept of Web Components and their pivotal role in addressing complex web development challenges. You'll gain proficiency in essential web development languages, including HTML, CSS, JavaScript, and TypeScript, providing a robust foundation for crafting dynamic and responsive web applications. Dive deep into the intricacies of Shadow DOM, mastering concepts like Shadow Host, Shadow Tree, and Shadow Root to create encapsulated and reusable web components. Develop expertise in crafting Custom Elements, from defining and registering custom element classes to harnessing lifecycle callbacks for dynamic applications. You'll also learn the art of using Templates, including the Template Element and Slot Element, streamlining your UI development process. Finally, acquire the essential skills for unit testing Web Components, setting up Jest and TypeScript for effective testing that ensures the reliability and quality of your components in real-world projects.

Learning Outcomes

Understand the concept of Web Components and their role in solving web development challenges.
Gain proficiency in essential web development languages: HTML, CSS, JavaScript, and TypeScript.
Master the use of Shadow DOM in Web Components, including concepts like Shadow Host, Shadow Tree, and Shadow Root.
Develop expertise in Web Components' Custom Elements, defining and registering custom element classes, and utilizing lifecycle callbacks.
Learn how to use Templates in Web Components, including the Template Element and Slot Element.
Acquire the skills for unit testing in Web Components, setting up Jest and TypeScript and creating effective unit test scaffolding.

Training Materials

Comprehensive courseware is distributed online at the start of class. All students receive a downloadable MP4 recording of the training.

Software Requirements

Students will need a free, personal GitHub account to access the courseware. Students will need permission to install Node.js and Visual Studio Code on their computers. Also, students will need permission to install NPM Packages and Visual Studio Code extensions. If students are unable to configure a local environment, a cloud-based environment can be provided.

Training Topics

What are Web Components?

What problem do Web Components solve?
W3C Standards
Custom Elements
Shadow DOM
HTML Template

Language Review

HTML
- Elements & Custom Elements
- Attributes & Custom Attributes
- Semantic Meaning
- Template and Slot Elements
CSS
- Selectors
  - Id, Class, Element
  - Attribute
  - Pseudo-Class
  - Combinators
  - Specificity
  - Scoping Strategy
- Layout
  - Box Model
  - FlexBox
  - Grid
- Display & Position
- Styling Fonts & Colors
JavaScript
- Classes
- Prototype Inheritance
- Functions
- Types and Variables
- Promises
TypeScript
- Webpack & Babel
- Browser API Review
- DOM Manipulation
- Selecting Elements
- Append/Remove/Modify Elements
- Cloning Elements
Http Requests
- XmlHttpRequest Object
- Fetch API
Events
- Bubbling
- Capturing
- Event Data
- Registering Event Handlers
- Triggering Events
- Prevent Default
- Stop Propagation

Web Components – Custom Elements

Define a new Custom Element Class
Register Custom Element
Lifecycle Callbacks
- Connected Callback
- Disconnected Callback
- Adopted Callback
- Attribute Changed Callback
Transpilers and Classes

Web Components – Shadow DOM

Shadow Host
Shadow Tree
Shadow Boundary
Shadow Root
Attach a Shadow Root
Applying Styles
Browser Events
Open vs Closed

Web Components – Template

Template Element
Usage with Web Components
Slot Element
Project Content with Slots

Web Components - Unit Testing

Setting up Jest and TypeScript
Unit Test Scaffolding
- Test Suite
- Test
- Setup/Teardown
- Assertions
- Spies
- Mocks