Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Web Component Engineering
Introduction
Welcome
Prerequisites
Setup
Using the Learning App
Pacing Your Learning
About Web Components
Using Web Components
Introduction
Using Libraries of Web Components
Theming Web Components
Custom Styling Web Components
Styling Undefined Elements
Interacting with Web Components from JavaScript
Integrating Web Components with JavaScript Frameworks
Rendering Web Components with Server Frameworks
Exercises
Review
Defining Web Components
Introduction
Autonomous Custom Elements
Shadow DOM
Slot Composition
HTML Templates
Custom Element Lifecycle
Observed Attributes
Styling
Customizable Built-in Elements
Debugging Web Components
Exercises
Review
Working with the DOM
Introduction
Scaffolding a Tabs Component
Host DOM
Attributes
Properties
Events
Managing Selection
Finishing Touches
ASIDE: Custom Element Registries
Exercises
Review
Styling Web Components
Introduction
Constructible and Adopted Style Sheets
FUTURE: CSS Module Scripts
Scaffolding a Responsive Card System
Document Root Styling
Host Styling
ASIDE: CSS Part and Exportpart
Styling Slotted Content
Container Style Queries
Container Size Queries
Organizing Your CSS
FUTURE: CSS Custom States
ASIDE: Shadow DOM Fonts
Exercises
Review
Leveraging Shadow DOM
Introduction
Light and Shadow DOM Composition
Event Behavior
Walking Composed DOM
Slot Change Events
ASIDE: MutationObserver
Manual Slot Assignment
Declarative Shadow DOM (DSD)
DSD Style Sharing
FUTURE: Manual Slot Assignment with DSD
Custom Element DSD Hydration
ASIDE: Polyfilling DSD
Exercises
Review
Web Component Toolkit
Introduction
Scaffolding a Name Tag Component
Improved Style Helper
Template Helper
View Helper
Web Component Metadata
Web Component Base Class
Attribute Metaprogramming
Robust Attributes
Extensible Attributes
Ergonomics
SSR Hydration
Exercises
Review
Designing for Accessibility
Introduction
Scaffolding an Accordion Component
ARIA Roles, States, and Attributes
Focus Delegation
Toolkit: BooleanAttr
Screen Readers
Focus Styling
Color Contrast
Vision Deficiences
Forced Colors and System Color Keywords
Vertical Keyboard Navigation
Modernizing the Tabs Component
Horizontal and RTL Keyboard Navigation
CSS Logical Properties
ElementInternals: ARIA
ASIDE: Polyfilling ElementInternals ARIA
FUTURE: ARIA Mixin and Cross Root ARIA
Exercises
Review
Integrating with Forms
Introduction
Form Association
Toolkit: Form Component Base Class
Disabling Form Elements
Scaffolding a Switch Component
Interactive vs. Container Elements
Form Element Values
Handling Form Reset
Handling State Restoration
Forwarding Events
Adjustments for Empty Slots
Styling the Switch
Scaffolding a Button Component
Toolkit: TransferringPropertyAttr
Standard Button Attributes
Making a Submit Button
Making a Reset Button
Styling the Button
Scaffolding an Input Component
Form Validation
Form Submission Requests
Styling the Input
Exercises
Review
Design Systems
Introduction
What is a Design System?
Component Specifications
The MyLibrary Project
Code Organization
Design Tokens
W3C Design Tokens Format
CSS Mixins
Behaviors, Controllers, and Recipes
Headless Components
Custom Elements Manifest
Library Registration, Export, and Package Patterns
Exercises
Review
Applications
Introduction
Architectures and Topologies
MyLibrary App Demo
Code Organization
Application Startup
The Application Shell
Handling Icons
Sharing Styles
Routing and Navigation
Using View Transitions
Context and Dependency Injection
Templating Over Data
Security
Form Data
Modal Dialogs
Progressive Web Apps
Exercises
Review
Libraries and Tools
Introduction
Tool: Storybook
Tool: esbuild
Tool: Playwright
Tool: Modern Web and Web Test Runner
Tool: Custom Elements Analyzer
Tool: VS Code
Tool: TypeScript
Library: Reactively
Library: FAST
Library: Lit
Library: Shoelace
Exercises
Review
Conclusion
Next Steps
Wrapping Up
Declarative Shadow DOM (DSD)
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock