Skip to content
Journey to Code

Series

JOURNEY TO WEB COMPONENTS / TRACK 03

Production Web Component Architecture

A component is not finished when the demo works. It is finished when the application can depend on its contract.

THE STARTING CONTRACT

Bring one component that already works

This track assumes you can define a custom element, attach a shadow root, use a slot, and dispatch an event. We will take that component into the parts of an application where shortcuts become bugs.

Review the first component track →

ENTER THROUGH THE FAILURE

I want to ... then read

Prepare the component for production

  1. 01 / Join the platform

    Accessibility in Web ComponentsBuild custom elements that say what they are, work from the keyboard, and announce changes to screen reader users. · 12 min read
  2. 02 / Ship the component

    Advanced Patterns & Integration with FrameworksPass objects from React to a custom element without getting [object Object], and handle events across the framework boundary. · 4 min read
  3. 03 / Prove it in the application

    Real-World Examples & Patterns in Web ComponentsSee who publishes web components (Google, Microsoft, Adobe and others) and four patterns that make them easy to use, with runnable examples. · 11 min read
  4. The Future of Web ComponentsWhich Web Component features you can use today, which work in only some browsers, and which are still proposals, with a dated status table. · 8 min read