completefrontend
THE WEB COMPONENTS COURSE

Web Components

The complete path through Web Components: custom elements, shadow DOM and slots, styling, accessibility, forms, Lit, server rendering, frameworks, and design systems, then how browsers run it all under the hood. Every component you build runs in your browser, and works in any page and any framework.

214 lessons on the way46 modules16 stagesBeginner to expert
Start hereLesson 1.1 Coming soon

What are web components?

A web component is an HTML tag you make yourself, and it works in any page and any framework. The Web Components lessons are being written, and this one opens first.

See it in the learning path
Welcome to web componentsComing soon

// What you’ll learn

  • Tags you define yourself
  • The standards behind them
  • What they are and what they aren't
  • Who uses them: Photoshop on the web, Edge, MDN, Firefox
  • A map of this course

Your progress

View detailed stats
214 lessons on the way

Your progress starts with the first published lesson.

day streak
0
days this week
0
stages done
0/16

The learning path

214 lessons coming soon

16 stages, in order. Each one builds on the last, from using your first component to reading how browsers create, slot, and style them. Every lesson is listed now, and each one opens as soon as it's published. Jump to a stage, or search for any topic.

  1. STAGE 1 · BEGINNERGetting started2 modules · 9 lessons
  2. STAGE 2 · BEGINNERCustom elements3 modules · 16 lessons
  3. STAGE 3 · BEGINNER TO INTERMEDIATEShadow DOM, templates, and slots5 modules · 20 lessons
  4. STAGE 4 · INTERMEDIATEStyling web components2 modules · 14 lessons
  5. STAGE 5 · INTERMEDIATEAccessible components3 modules · 13 lessons
  6. STAGE 6 · INTERMEDIATEForms2 modules · 9 lessons
  7. STAGE 7 · INTERMEDIATEBuilding components well2 modules · 10 lessons
  8. STAGE 8 · INTERMEDIATELit3 modules · 14 lessons
  9. STAGE 9 · ADVANCEDServer rendering2 modules · 10 lessons
  10. STAGE 10 · ADVANCEDFrameworks and libraries2 modules · 11 lessons
  11. STAGE 11 · ADVANCEDTesting, tooling, and publishing3 modules · 12 lessons
  12. STAGE 12 · ADVANCEDDesign systems2 modules · 9 lessons
  13. STAGE 13 · ADVANCEDApplications and performance3 modules · 12 lessons
  14. STAGE 14 · EXPERTUnder the hood4 modules · 25 lessons
  15. STAGE 15 · EXPERTBuild it yourself, and the standards behind it4 modules · 16 lessons
  16. STAGE 16 · ADVANCEDProjects4 modules · 14 lessons

214 lessons in 16 stages and 46 modules.

Stage 1 Beginner

Getting started

What web components are, where they stand in 2026, and how to use components other people built.

2 modules · 9 lessons

  1. 0 of 4 lessons ready

    Module 1: Welcome to web components

    What a web component is, what works today, when to reach for one, and your setup.

    1. 1.1What are web components?Soon
    2. 1.2Web components in 2026Soon
    3. 1.3When to use web components, and when notSoon
    4. 1.4Your setup and the course projectSoon
  2. 0 of 5 lessons ready

    Module 2: Using web components

    Use components someone else built: load them, talk to them, theme them, and avoid a flash of unstyled tags.

    1. 2.1Using a component librarySoon
    2. 2.2Talking to a component from JavaScriptSoon
    3. 2.3Theming components from the outsideSoon
    4. 2.4Before the definition loads: :definedSoon
    5. 2.5Web components in frameworks and on servers: a previewSoon

Stage 2 Beginner

Custom elements

Define your own elements: the class, the lifecycle, upgrades, the registry, and a clean public API.

3 modules · 16 lessons

  1. 0 of 6 lessons ready

    Module 3: Your first custom element

    A class, a name, and the callbacks the browser calls as the element lives on the page.

    1. 3.1Your first custom elementSoon
    2. 3.2What the constructor may doSoon
    3. 3.3connectedCallback and disconnectedCallbackSoon
    4. 3.4Reacting to attributesSoon
    5. 3.5Moving and adopting elementsSoon
    6. 3.6The whole lifecycle, in orderSoon
  2. 0 of 3 lessons ready

    Module 4: Upgrades and the registry

    Elements can exist before their definition. Learn how upgrades work and how registries keep names apart.

    1. 4.1Upgrades: elements before their definitionSoon
    2. 4.2Properties set before the upgradeSoon
    3. 4.3Loading definitions on demandSoon
  3. 0 of 7 lessons ready

    Module 5: A component's public API

    Attributes, properties, events, and methods: the parts of a component other people use.

    1. 5.1Attributes and propertiesSoon
    2. 5.2Boolean, number, and enum attributesSoon
    3. 5.3Dispatching eventsSoon
    4. 5.4Designing a component APISoon
    5. 5.5Working with childrenSoon
    6. 5.6HTML web componentsSoon
    7. 5.7Customized built-in elementsSoon

Stage 3 Beginner to intermediate

Shadow DOM, templates, and slots

Give a component a private inside, put the user's content where it belongs, and handle events and focus across the boundary.

5 modules · 20 lessons

  1. 0 of 5 lessons ready

    Module 6: Shadow roots

    A private DOM tree inside an element: what it hides, what it doesn't, and when to skip it.

    1. 6.1What is shadow DOM?Soon
    2. 6.2Open and closed shadow rootsSoon
    3. 6.3What encapsulation meansSoon
    4. 6.4When to skip shadow DOMSoon
    5. 6.5Scoped custom element registriesSoon
  2. 0 of 3 lessons ready

    Module 7: Templates and rendering

    Reusable markup with template, and the ways a component can put its markup on the page.

    1. 7.1The template elementSoon
    2. 7.2Filling a template with dataSoon
    3. 7.3Ways to render a componentSoon
  3. 0 of 5 lessons ready

    Module 8: Slots and composition

    Let users put their own content inside your component, exactly where you want it.

    1. 8.1Slots: putting content in placeSoon
    2. 8.2Light DOM, shadow DOM, and the flat treeSoon
    3. 8.3The slot APISoon
    4. 8.4Reacting to slotted contentSoon
    5. 8.5Manual slot assignmentSoon
  4. 0 of 4 lessons ready

    Module 9: Events and focus across the boundary

    How events, focus, and selection behave when they cross a shadow root.

    1. 9.1Event retargetingSoon
    2. 9.2Composed eventsSoon
    3. 9.3Focus and shadow DOMSoon
    4. 9.4Walking the composed treeSoon
  5. 0 of 3 lessons ready

    Module 10: A first real component

    Put the pieces together in a tabs component, and learn to debug it.

    1. 10.1Build tabs: structure and APISoon
    2. 10.2Build tabs: selection and eventsSoon
    3. 10.3Debugging web componentsSoon

Stage 4 Intermediate

Styling web components

Style a component from the inside, and give the people using it a clear, safe way to style it from the outside.

2 modules · 14 lessons

  1. 0 of 7 lessons ready

    Module 11: Styles inside the shadow root

    Where component styles live, which rules win, and how to share them without copying.

    1. 11.1Styles inside a shadow rootSoon
    2. 11.2Styling the hostSoon
    3. 11.3Styling slotted contentSoon
    4. 11.4Who wins: the shadow cascadeSoon
    5. 11.5Constructable stylesheetsSoon
    6. 11.6CSS module scriptsSoon
    7. 11.7Fonts and shadow DOMSoon
  2. 0 of 7 lessons ready

    Module 12: A styling API for others

    Give users safe, documented ways to style your component, and make it fit any layout.

    1. 12.1Custom properties as a styling APISoon
    2. 12.2Parts: ::part and exportpartsSoon
    3. 12.3Custom states and :state()Soon
    4. 12.4Page styles for componentsSoon
    5. 12.5Container queries in componentsSoon
    6. 12.6Organizing component CSSSoon
    7. 12.7Motion in componentsSoon

Stage 5 Intermediate

Accessible components

Make components that screen readers, keyboards, and every visitor can use, across shadow roots.

3 modules · 13 lessons

  1. 0 of 5 lessons ready

    Module 13: Semantics across shadow roots

    Roles, names, and relationships when part of the markup is hidden in a shadow tree.

    1. 13.1Accessibility and shadow DOMSoon
    2. 13.2ARIA with ElementInternalsSoon
    3. 13.3ARIA references across shadow rootsSoon
    4. 13.4Labels and descriptionsSoon
    5. 13.5Announcing changesSoon
  2. 0 of 5 lessons ready

    Module 14: Keyboard and focus

    Keyboard support that matches the ARIA patterns, built with real components.

    1. 14.1Focus delegation and focus stylesSoon
    2. 14.2Keyboard navigation with roving tabindexSoon
    3. 14.3Accessible tabsSoon
    4. 14.4An accessible accordionSoon
    5. 14.5Dialogs and popovers in componentsSoon
  3. 0 of 3 lessons ready

    Module 15: Visual access and testing

    Color, contrast, forced colors, writing direction, and how to test it all.

    1. 15.1Color, contrast, and forced colorsSoon
    2. 15.2Right-to-left and logical propertiesSoon
    3. 15.3Testing accessibilitySoon

Stage 6 Intermediate

Forms

Make components that join forms like native inputs: values, validation, reset, restore, and submission.

2 modules · 9 lessons

  1. 0 of 5 lessons ready

    Module 16: Form-associated custom elements

    ElementInternals lets a custom element be a real form control.

    1. 16.1Joining a formSoon
    2. 16.2Form valuesSoon
    3. 16.3ValidationSoon
    4. 16.4Form lifecycle callbacksSoon
    5. 16.5Wrap a native input or build your ownSoon
  2. 0 of 4 lessons ready

    Module 17: Building form controls

    Build real controls end to end, then pull the shared parts into a base class.

    1. 17.1Build a switchSoon
    2. 17.2Build a buttonSoon
    3. 17.3Build an inputSoon
    4. 17.4A base class for form controlsSoon

Stage 7 Intermediate

Building components well

Reactive rendering, a toolkit of your own, and patterns for data and composition, before reaching for a library.

2 modules · 10 lessons

  1. 0 of 5 lessons ready

    Module 18: Reactive rendering by hand

    Update the screen when data changes, efficiently, with only the platform.

    1. 18.1Reactive propertiesSoon
    2. 18.2Rendering with tagged templatesSoon
    3. 18.3Lists and keysSoon
    4. 18.4Data flow between componentsSoon
    5. 18.5Signals in componentsSoon
  2. 0 of 5 lessons ready

    Module 19: A toolkit of your own

    Pull repeated code into a small base class and helpers, the way libraries do.

    1. 19.1A component base classSoon
    2. 19.2Declaring attributesSoon
    3. 19.3Mixins, controllers, and behaviorsSoon
    4. 19.4Context and dependency injectionSoon
    5. 19.5Async data in componentsSoon

Stage 8 Intermediate

Lit

Lit is the most used web components library. Learn it from the first component to publishing.

3 modules · 14 lessons

  1. 0 of 6 lessons ready

    Module 20: Lit basics

    LitElement, reactive properties, templates, styles, and events.

    1. 20.1Why Lit?Soon
    2. 20.2Reactive properties in LitSoon
    3. 20.3Lit templatesSoon
    4. 20.4Conditions and lists in LitSoon
    5. 20.5Styles in LitSoon
    6. 20.6Events in LitSoon
  2. 0 of 5 lessons ready

    Module 21: Lit in depth

    The update lifecycle, directives, controllers, context, tasks, signals, and localization.

    1. 21.1The Lit update lifecycleSoon
    2. 21.2Lit directivesSoon
    3. 21.3Reactive controllers and mixins in LitSoon
    4. 21.4Context and tasks in LitSoon
    5. 21.5Signals in LitSoon
  3. 0 of 3 lessons ready

    Module 22: Shipping Lit

    Localize Lit components, wrap them for frameworks, and test and publish them.

    1. 22.1Localizing Lit componentsSoon
    2. 22.2Wrapping Lit components for frameworksSoon
    3. 22.3Testing and publishing LitSoon

Stage 9 Advanced

Server rendering

Send components as HTML with declarative shadow DOM, hydrate them, and use them with server frameworks.

2 modules · 10 lessons

  1. 0 of 5 lessons ready

    Module 23: Declarative shadow DOM

    Shadow roots written in HTML, so components show before JavaScript runs.

    1. 23.1Declarative shadow DOMSoon
    2. 23.2Declarative shadow DOM and HTML APIsSoon
    3. 23.3Hydrating custom elementsSoon
    4. 23.4Sharing styles in server-rendered componentsSoon
    5. 23.5Declarative shadow DOM in practiceSoon
  2. 0 of 5 lessons ready

    Module 24: Servers and frameworks

    Server renderers for web components and how to choose one.

    1. 24.1Server rendering optionsSoon
    2. 24.2Lit on the serverSoon
    3. 24.3HTML-first frameworks: Enhance and WebCSoon
    4. 24.4Web components in Astro and Next.jsSoon
    5. 24.5Components that work before JavaScriptSoon

Stage 10 Advanced

Frameworks and libraries

Use web components inside frameworks, make web components from frameworks, and choose a library.

2 modules · 11 lessons

  1. 0 of 5 lessons ready

    Module 25: Web components inside frameworks

    Properties, events, forms, and types in each popular framework.

    1. 25.1Web components in ReactSoon
    2. 25.2Web components in VueSoon
    3. 25.3Web components in AngularSoon
    4. 25.4Web components in Svelte, Solid, and PreactSoon
    5. 25.5Types for every frameworkSoon
  2. 0 of 6 lessons ready

    Module 26: Libraries and frameworks that make web components

    Other ways to build components, and how to choose.

    1. 26.1Custom elements from Vue, Angular, and SvelteSoon
    2. 26.2StencilSoon
    3. 26.3FAST and Web AwesomeSoon
    4. 26.4Design system librariesSoon
    5. 26.5Small librariesSoon
    6. 26.6Choosing a library, or noneSoon

Stage 11 Advanced

Testing, tooling, and publishing

Test components in real browsers, describe them with a manifest, and publish them safely.

3 modules · 12 lessons

  1. 0 of 5 lessons ready

    Module 27: Testing components

    Unit, end-to-end, accessibility, and visual tests that see into shadow roots.

    1. 27.1Unit testing componentsSoon
    2. 27.2Testing through shadow rootsSoon
    3. 27.3End-to-end and visual testsSoon
    4. 27.4Automated accessibility testsSoon
    5. 27.5Storybook for componentsSoon
  2. 0 of 4 lessons ready

    Module 28: Tooling

    TypeScript, the Custom Elements Manifest, linting, and builds.

    1. 28.1TypeScript for web componentsSoon
    2. 28.2The Custom Elements ManifestSoon
    3. 28.3Linting componentsSoon
    4. 28.4Building componentsSoon
  3. 0 of 3 lessons ready

    Module 29: Publishing components

    Package, version, and release components so they're safe to use anywhere.

    1. 29.1Packaging componentsSoon
    2. 29.2Versions, monorepos, and releasesSoon
    3. 29.3Polyfills in 2026Soon

Stage 12 Advanced

Design systems

Build and run a design system on web components: specs, tokens, themes, docs, and teams.

2 modules · 9 lessons

  1. 0 of 5 lessons ready

    Module 30: Foundations of a design system

    What a design system is, how components are specified, and how tokens and themes work.

    1. 30.1What is a design system?Soon
    2. 30.2Component specificationsSoon
    3. 30.3Design tokensSoon
    4. 30.4ThemesSoon
    5. 30.5Headless components and behaviorsSoon
  2. 0 of 4 lessons ready

    Module 31: Running a design system

    Organize, document, localize, and hand off a component library.

    1. 31.1Organizing a component librarySoon
    2. 31.2Documenting a design systemSoon
    3. 31.3From design to codeSoon
    4. 31.4Internationalizing a component librarySoon

Stage 13 Advanced

Applications and performance

Build whole applications from web components, keep them secure, and make them fast.

3 modules · 12 lessons

  1. 0 of 5 lessons ready

    Module 32: Application architecture

    How an app made of web components is structured, started, routed, and shared between teams.

    1. 32.1Application architecturesSoon
    2. 32.2The app shell and startupSoon
    3. 32.3Routing and view transitionsSoon
    4. 32.4State in applicationsSoon
    5. 32.5Micro-frontends with web componentsSoon
  2. 0 of 4 lessons ready

    Module 33: Application features

    Icons, shared styles, data, security, and offline support in an app made of components.

    1. 33.1Icons and shared styles in appsSoon
    2. 33.2Templating over dataSoon
    3. 33.3Security for componentsSoon
    4. 33.4Progressive web apps with web componentsSoon
  3. 0 of 3 lessons ready

    Module 34: Performance

    Measure and improve how fast components load and render.

    1. 34.1What web components costSoon
    2. 34.2Loading components fastSoon
    3. 34.3Rendering fastSoon

Stage 14 Expert

Under the hood

How browsers and libraries implement custom elements, shadow DOM, slots, events, styles, forms, and accessibility, read from the source.

4 modules · 25 lessons

  1. 0 of 7 lessons ready

    Module 35: Custom elements inside the browser

    Definitions, element states, creation paths, reactions, and upgrades, as the engine runs them.

    1. 35.1Definitions and element statesSoon
    2. 35.2How elements get createdSoon
    3. 35.3The construction stackSoon
    4. 35.4Custom element reactionsSoon
    5. 35.5The upgrade algorithmSoon
    6. 35.6Scoped registries insideSoon
    7. 35.7Moves and adoption insideSoon
  2. 0 of 5 lessons ready

    Module 36: Shadow DOM inside the browser

    Tree scopes, slot assignment, the flat tree, the event path, and focus in the engine.

    1. 36.1Shadow trees and tree scopesSoon
    2. 36.2Slot assignment insideSoon
    3. 36.3The flat tree and layoutSoon
    4. 36.4The event path and retargetingSoon
    5. 36.5Focus inside shadow rootsSoon
  3. 0 of 6 lessons ready

    Module 37: Styles, forms, and accessibility inside

    How the engine scopes styles, shares sheets, associates forms, builds the accessibility tree, and parses declarative roots.

    1. 37.1Style scoping insideSoon
    2. 37.2Adopted stylesheets insideSoon
    3. 37.3The form owner insideSoon
    4. 37.4Form submission insideSoon
    5. 37.5The accessibility tree insideSoon
    6. 37.6Declarative shadow DOM insideSoon
  4. 0 of 7 lessons ready

    Module 38: Libraries inside

    How Lit, Stencil, FAST, and frameworks' custom element support work, read from their source.

    1. 38.1How lit-html rendersSoon
    2. 38.2How ReactiveElement updatesSoon
    3. 38.3How Lit SSR and hydration workSoon
    4. 38.4How Stencil worksSoon
    5. 38.5How FAST worksSoon
    6. 38.6How React handles custom elementsSoon
    7. 38.7How Vue, Angular, and Svelte handle custom elementsSoon

Stage 15 Expert

Build it yourself, and the standards behind it

Build your own component framework, read the specs, and follow how web components were made and where they're going.

4 modules · 16 lessons

  1. 0 of 5 lessons ready

    Module 39: Build your own component framework

    Build a small Lit-like framework from scratch, one piece per lesson.

    1. 39.1Build a reactive base classSoon
    2. 39.2Build a template engine: parsingSoon
    3. 39.3Build a template engine: updatesSoon
    4. 39.4Build directivesSoon
    5. 39.5Build keyed listsSoon
  2. 0 of 3 lessons ready

    Module 40: Build your own server rendering and polyfills

    Render your framework's components on the server, hydrate them, and write a polyfill.

    1. 40.1Build server renderingSoon
    2. 40.2Build hydrationSoon
    3. 40.3Build a scoped registry polyfillSoon
  3. 0 of 4 lessons ready

    Module 41: Reading the standards

    Read the HTML and DOM specifications, and test the platform yourself.

    1. 41.1Reading the HTML spec for custom elementsSoon
    2. 41.2Reading the DOM spec for shadow treesSoon
    3. 41.3Reading CSS Shadow Module Level 1Soon
    4. 41.4Web platform tests and browser bugsSoon
  4. 0 of 4 lessons ready

    Module 42: History and the road ahead

    How web components came to be, how standards are made, and what's next.

    1. 42.1A history of web componentsSoon
    2. 42.2How web standards get madeSoon
    3. 42.3The road aheadSoon
    4. 42.4Component models comparedSoon

Stage 16 Advanced

Projects

Guided projects and a capstone that use the whole course.

4 modules · 14 lessons

  1. 0 of 4 lessons ready

    Module 43: Guided project: a UI kit

    Grow the course's components into an accessible UI kit, one milestone per lesson.

    1. 43.1UI kit: plan and foundationsSoon
    2. 43.2UI kit: disclosure, accordion, and dialogSoon
    3. 43.3UI kit: a comboboxSoon
    4. 43.4UI kit: tests and docsSoon
  2. 0 of 3 lessons ready

    Module 44: Guided project: form controls

    Build the form controls the kit still needs, and prove they work in frameworks.

    1. 44.1Form controls: a selectSoon
    2. 44.2Form controls: a date inputSoon
    3. 44.3Form controls in frameworksSoon
  3. 0 of 3 lessons ready

    Module 45: Guided project: an app and a server-rendered site

    Use the kit to build a tea shop app, then render its pages on the server.

    1. 45.1App: shell and routesSoon
    2. 45.2App: data and formsSoon
    3. 45.3A server-rendered siteSoon
  4. 0 of 4 lessons ready

    Module 46: Capstone: your own design system

    Build, test, document, and ship a design system of your own.

    1. 46.1Capstone: plan and tokensSoon
    2. 46.2Capstone: componentsSoon
    3. 46.3Capstone: docs and testsSoon
    4. 46.4Capstone: ship itSoon