I want to see a working component.
Introduction to Web Components →JOURNEY TO WEB COMPONENTS / TRACK 02
Build Your First Web Components
Start with an unknown tag. Finish with a component whose content, styles, and events have clear boundaries.
BEFORE WE DEFINE THE TAG
Do you need the foundations first?
If HTML structure, CSS selectors, and JavaScript event listeners are already familiar, start here. If any of those still feel slippery, the foundations track builds them in seven smaller steps.
Review the Web Foundations track →START AT THE PROBLEM YOU HAVE
I want to ... then read
I want to define a tag safely.
Getting Started with Custom Elements →I want a component to clean up and talk to the page.
Lifecycle Callbacks & Component Communication →I want to know whether I need Shadow DOM.
Exploring the Shadow DOM →I want the page to fill my component.
How Templates and Slots Work →I want users to restyle my component.
Mastering the Art of Web Component Styling →Build the component
01 / Define the element
Introduction to Web ComponentsBuild a custom tag like info-card that carries its own look and behavior, and see how Shadow DOM keeps its styles from leaking.- Getting Started with Custom ElementsDefine a custom element, change an attribute and watch its text update, and see how it learns when it is added or removed.
- Lifecycle Callbacks & Component CommunicationReact when a custom element is added, removed or changed with lifecycle callbacks, then pass messages between components.
02 / Build the boundary
Exploring the Shadow DOMAttach a private shadow tree to an element, choose open or closed mode, and learn which page styles can reach inside.- How Templates and Slots WorkUse template for a fixed layout and slot for the blanks a page fills in, then combine them in a web component.
03 / Expose the contract
Mastering the Art of Web Component StylingStyle a web component from outside through four doors in its wall: :host, ::slotted, CSS custom properties and ::part.