Updated June 2026

Professional Web Components

Class Duration

35 hours of live training delivered over 5 days.

Student Prerequisites

Experience with modern JavaScript or TypeScript
Experience with web browser programming

Target Audience

Computer programming professionals who wish to delve into the world of Web Components - from the W3C standards through Custom Elements, Shadow DOM, and Templates to the Lit framework and Lit server rendering. All attendees should have experience with modern JavaScript or TypeScript and web browser programming. Newcomers to the platform can start with Introduction to Web Components.

Description

This comprehensive course is designed for computer programming professionals who wish to delve into the world of Web Components. It covers everything from the basics of Web Components and their W3C standards to the intricacies of Custom Elements, Shadow DOM, and Templates. The course also includes a thorough review of HTML, CSS, JavaScript, and TypeScript languages, focusing on their relevance to Web Components. Participants will learn how to define and register Custom Elements, explore the Shadow DOM, and use Templates in Web Components. The course also provides insights into unit testing, Web Component Frameworks, particularly the Lit Framework, and Lit Server Rendering. By the end of the course, participants will have a solid understanding of Web Components and the skills to effectively use them in their programming projects.

Learning Outcomes

Understand the concept, purpose, and W3C standards of Web Components.
Review HTML, CSS, JavaScript, and TypeScript languages, focusing on their relevance to Web Components.
Learn to define, register, and understand the lifecycle of Custom Elements in Web Components.
Explore the Shadow DOM in Web Components, including its host, tree, boundary, root, and style application.
Discover the use of Templates in Web Components, including the Template and Slot elements.
Gain knowledge on unit testing in Web Components, including setting up Jest and TypeScript.
Get acquainted with Web Component Frameworks, particularly the Lit Framework, and learn to define, render, and manage data in Lit Web Components.
Learn about Lit Server Rendering, including server and client usage, authoring components, and DOM emulation.

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. No local student setup is required, this course is delivered with GitHub Codespaces. The free allotment of Codespaces hours from GitHub is sufficient to complete the course.

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

Web Component Frameworks

What is a Framework?
Popular Frameworks
Lit Framework
What is Lit?
Getting Started with Lit

Lit Web Components

Overview
Defining
Rendering
Reactive Properties
Styles
Lifecycle
Shadow DOM
Events
Decorators

Lit Templates

Overview
Expressions
Conditionals
Lists
Built-in Directives
Custom Directives

Lit Composition

Overview
Component Compositiom
Mixins
Controllers

Lit Managing Data

Context
Async Tasks

Lit Tools and Workflows

Overview
Requirements
Development
Testing
Publishing Production
Starter Kits
Adding Lit

Lit Server Rendering

Overview
Server Usage
Client Usage
Authoring Components
DOM Emulation