One lesson
An individual lesson
This track has no lesson ready to buy yet. Each lesson becomes available only after it is built and reviewed.
$5.00Not available yet
All course tracks
Frontend and browser · 30 lessons · up to 10 minutes each
Web Components
A planned browser-component path through encapsulation, events, composition, and tests.
Coming Soon
One-time purchase · USD
Choose what to unlock
Access is attached to your account after payment is verified. No subscription.
Full category
Web Components
Permanent access to the lessons published in this track when you buy. Future lessons are not included. 0 of 30 lessons are published; 0 are in owner review and 30 are Coming Soon.
$29.0030 lessons still in progress
Beginner
Lessons 1–10
01 Web Components: Sketch custom element lifecycle
Topic: custom element lifecycle
Draw a small map of custom element lifecycle in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Beginner4 minComing Soon02 Web Components: Name the parts of attributes and properties
Topic: attributes and properties
Label the main pieces in attributes and properties in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Beginner5 minComing Soon03 Web Components: Trace an example of shadow DOM boundaries
Topic: shadow DOM boundaries
Follow one input through shadow DOM boundaries in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Beginner6 minComing Soon04 Web Components: Compare choices for slots and composition
Topic: slots and composition
Write down one practical difference between slots and composition in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Beginner7 minComing Soon05 Web Components: Find the boundary in custom events and bubbling
Topic: custom events and bubbling
Mark where custom events and bubbling in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Beginner8 minComing Soon06 Web Components: Inspect an example of form-associated behavior
Topic: form-associated behavior
Annotate a minimal example of form-associated behavior in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Beginner9 minComing Soon07 Web Components: Connect style encapsulation to a neighboring concept
Topic: style encapsulation
Show how style encapsulation in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Beginner10 minComing Soon08 Web Components: Spot a failure mode in framework interoperability
Topic: framework interoperability
Describe one likely failure for framework interoperability in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Beginner3 minComing Soon09 Web Components: Read an official example of browser-based tests
Topic: browser-based tests
Summarize an official example of browser-based tests in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Beginner5 minComing Soon10 Web Components: Choose a use case for accessibility and upgrade behavior
Topic: accessibility and upgrade behavior
Match one small use case to accessibility and upgrade behavior in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Beginner6 minComing Soon
Intermediate
Lessons 11–20
11 Web Components: Build an example with custom element lifecycle
Topic: custom element lifecycle
Create a small working example that uses custom element lifecycle in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Intermediate4 minComing Soon12 Web Components: Compose attributes and properties with another component
Topic: attributes and properties
Combine attributes and properties in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Intermediate5 minComing Soon13 Web Components: Configure shadow DOM boundaries for a small case
Topic: shadow DOM boundaries
Set up shadow DOM boundaries in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Intermediate6 minComing Soon14 Web Components: Validate inputs around slots and composition
Topic: slots and composition
Add a check around slots and composition in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Intermediate7 minComing Soon15 Web Components: Use custom events and bubbling in a short workflow
Topic: custom events and bubbling
Add custom events and bubbling in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Intermediate8 minComing Soon16 Web Components: Refactor form-associated behavior into a reusable unit
Topic: form-associated behavior
Extract form-associated behavior in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Intermediate9 minComing Soon17 Web Components: Exercise style encapsulation with sample data
Topic: style encapsulation
Run sample data through style encapsulation in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Intermediate10 minComing Soon18 Web Components: Observe framework interoperability outputs
Topic: framework interoperability
Capture the result of framework interoperability in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Intermediate3 minComing Soon19 Web Components: Recover from a browser-based tests failure
Topic: browser-based tests
Handle one expected failure from browser-based tests in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Intermediate5 minComing Soon20 Web Components: Document accessibility and upgrade behavior behavior
Topic: accessibility and upgrade behavior
Write a short usage note for accessibility and upgrade behavior in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Intermediate6 minComing Soon
Advanced
Lessons 21–30
21 Web Components: Test a boundary around custom element lifecycle
Topic: custom element lifecycle
Add an edge-case test for custom element lifecycle in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Advanced4 minComing Soon22 Web Components: Harden attributes and properties
Topic: attributes and properties
Add the relevant access, safety, or validation control to attributes and properties in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Advanced5 minComing Soon23 Web Components: Measure shadow DOM boundaries
Topic: shadow DOM boundaries
Record a small baseline for shadow DOM boundaries in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Advanced6 minComing Soon24 Web Components: Reduce cost in slots and composition
Topic: slots and composition
Change one measurable cost in slots and composition in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Advanced7 minComing Soon25 Web Components: Diagnose a custom events and bubbling failure
Topic: custom events and bubbling
Use an observable signal to explain a failure in custom events and bubbling in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Advanced8 minComing Soon26 Web Components: Make form-associated behavior repeatable
Topic: form-associated behavior
Show that rerunning form-associated behavior in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Advanced9 minComing Soon27 Web Components: Review trade-offs in style encapsulation
Topic: style encapsulation
Compare two documented approaches to style encapsulation in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Advanced10 minComing Soon28 Web Components: Improve framework interoperability maintainability
Topic: framework interoperability
Refine framework interoperability in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Advanced3 minComing Soon29 Web Components: Verify browser-based tests end to end
Topic: browser-based tests
Check that a complete small flow using browser-based tests in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Advanced5 minComing Soon30 Web Components: Audit accessibility and upgrade behavior against its source docs
Topic: accessibility and upgrade behavior
Check the implementation of accessibility and upgrade behavior in the context of custom elements, shadow DOM, and interoperable browser components; save a short example or check that demonstrates the result.
Advanced6 minComing Soon
Reference documentation
References support the selected track topics while its lesson content is built and reviewed progressively.
This track is a catalog outline only. Each lesson remains unavailable until it is built and personally reviewed.