Web Components

4 hours of instruction

A course that builds a foundational understanding of Web Components. Web Components give us the power to extend the web with our own rich, standards-based components.

OBJECTIVES

1. Learn how to use the Shadow DOM
2. Define inert templates with the template tag
3. Extend HTML by registering your custom elements

PREREQUISITES

Introduction to JavaScript: Basic Concepts

SYLLABUS & TOPICS COVERED

1. HTML Templates
   • Common Approaches
   • Template Characteristics
   • Defining and Cloning
   • Injecting Dynamic Data
   • Nested Templates
2. Custom Elements
   • Core Functionality
   • Registering and Instantiating Custom Elements
   • Instantiating Extended Custom Elements
   • Lifecycle Callback Methods
   • Naming Approaches
3. Shadow DOM
   • Light DOM vs. Shadow DOM
   • Shadow DOM Alternatives
   • Shadow Host and Shadow Boundary
   • JavaScript Is Not Encapsulated
   • Content Insertion Point
   • Insertion Points vs. Distributed Nodes
   • Content Selectors
   • Shadow Insertion Points
   • Listing Distributed Nodes and Destination Insertion Points
   • Event Retargeting
   • Events That Stop

SOFTWARE REQUIREMENTS

Browser, Text editor