Introduction

1. Welcome
2. Prerequisites
3. Setup
4. Using the Learning App
5. Pacing Your Learning
6. About Web Components

Using Web Components

1. Introduction
2. Using Libraries of Web Components
3. Theming Web Components
4. Custom Styling Web Components
5. Styling Undefined Elements
6. Interacting with Web Components from JavaScript
7. Integrating Web Components with JavaScript Frameworks
8. Rendering Web Components with Server Frameworks
9. Exercises
10. Review

Defining Web Components

1. Introduction
2. Autonomous Custom Elements
3. Shadow DOM
4. Slot Composition
5. HTML Templates
6. Custom Element Lifecycle
7. Observed Attributes
8. Styling
9. Customizable Built-in Elements
10. Debugging Web Components
11. Exercises
12. Review

Working with the DOM

1. Introduction
2. Scaffolding a Tabs Component
3. Host DOM
4. Attributes
5. Properties
6. Events
7. Managing Selection
8. Finishing Touches
9. ASIDE: Custom Element Registries
10. Exercises
11. Review

Styling Web Components

1. Introduction
2. Constructible and Adopted Style Sheets
3. FUTURE: CSS Module Scripts
4. Scaffolding a Responsive Card System
5. Document Root Styling
6. Host Styling
7. ASIDE: CSS Part and Exportpart
8. Styling Slotted Content
9. Container Style Queries
10. Container Size Queries
11. Organizing Your CSS
12. ASIDE: CSS Custom States
13. ASIDE: Shadow DOM Fonts
14. Exercises
15. Review

Leveraging Shadow DOM

1. Introduction
2. Light and Shadow DOM Composition
3. Event Behavior
4. Walking Composed DOM
5. Slot Change Events
6. ASIDE: MutationObserver
7. Manual Slot Assignment
8. Declarative Shadow DOM (DSD)
9. DSD Style Sharing
10. FUTURE: Manual Slot Assignment with DSD
11. Custom Element DSD Hydration
12. ASIDE: Polyfilling DSD
13. Exercises
14. Review

Web Component Toolkit

1. Introduction
2. Scaffolding a Name Tag Component
3. Improved Style Helper
4. Template Helper
5. View Helper
6. Web Component Metadata
7. Web Component Base Class
8. Attribute Metaprogramming
9. Robust Attributes
10. Extensible Attributes
11. Ergonomics
12. SSR Hydration
13. Exercises
14. Review

Designing for Accessibility

1. Introduction
2. Scaffolding an Accordion Component
3. ARIA Roles, States, and Attributes
4. Focus Delegation
5. Toolkit: BooleanAttr
6. Screen Readers
7. Focus Styling
8. Color Contrast
9. Vision Deficiencies
10. Forced Colors and System Color Keywords
11. Vertical Keyboard Navigation
12. Modernizing the Tabs Component
13. Horizontal and RTL Keyboard Navigation
14. CSS Logical Properties
15. ElementInternals ARIA
16. ASIDE: Polyfilling ElementInternals ARIA
17. FUTURE: ARIA Mixin and Cross Root ARIA
18. Exercises
19. Review

Integrating with Forms

1. Introduction
2. Form Association
3. Toolkit: Form Component Base Class
4. Disabling Form Elements
5. Scaffolding a Switch Component
6. Interactive vs. Container Elements
7. Form Element Values
8. Handling Form Reset
9. Handling State Restoration
10. Forwarding Events
11. Adjustments for Empty Slots
12. Styling the Switch
13. Scaffolding a Button Component
14. Toolkit: TransferringPropertyAttr
15. Standard Button Attributes
16. Making a Submit Button
17. Making a Reset Button
18. Styling the Button
19. Scaffolding an Input Component
20. Form Validation
21. Form Submission Requests
22. Styling the Input
23. Exercises
24. Review

Design Systems

1. Introduction
2. What is a Design System?
3. Component Specifications
4. The MyLibrary Project
5. Code Organization
6. Design Tokens
7. W3C Design Tokens Format
8. CSS Mixins
9. Behaviors, Controllers, and Recipes
10. Headless Components
11. Custom Elements Manifest
12. Library Registration, Export, and Package Patterns
13. Exercises
14. Review

Applications

1. Introduction
2. Architectures and Topologies
3. MyLibrary App Demo
4. Code Organization
5. Application Startup
6. The Application Shell
7. Handling Icons
8. Sharing Styles
9. Routing and Navigation
10. Using View Transitions
11. Context and Dependency Injection
12. Templating Over Data
13. Security
14. Form Data
15. Modal Dialogs
16. Progressive Web Apps
17. Exercises
18. Review

Libraries and Tools

1. Introduction
2. Tool: Storybook
3. Tool: esbuild
4. Tool: Playwright
5. Tool: Modern Web & Web Test Runner
6. Tool: Custom Elements Analyzer
7. Tool: VS Code
8. Tool: TypeScript
9. Library: Reactively
10. Library: FAST
11. Library: Lit
12. Library: Shoelace
13. Exercises
14. Review

Conclusion

1. Next Steps
2. Wrapping Up