Patterns & Composition

What is composition in Web Components?

Composition means building a larger, more capable custom element by assembling smaller, focused custom elements inside it. Instead of writing one monolithic element that does everything, you break the work into pieces — each piece is its own custom element — and then nest them together to form the complete widget.

This mirrors how native HTML already works: a <form> contains <input>, <label>, and <button> elements, each responsible for a small slice of the overall experience. Web Components lets you build the same kind of layered, reusable structure with your own tag names.

A composed widget tree

The diagram below shows a <card-widget> element that composes two inner elements: <user-avatar> and <action-button>.

flowchart LR
  CW["card-widget"]
  UA["user-avatar"]
  AB["action-button"]
  CW --> UA
  CW --> AB

A composed widget tree

Lessons in this module

Lesson	Slug	What you will learn
Composing Components	composition	Nesting elements, attribute-based communication, and CustomEvent bubbling
Form-Associated Elements	form-associated	Making custom elements participate in native HTML forms
Accessibility Patterns	accessibility	ARIA roles, keyboard navigation, and focus management
Declarative Shadow DOM	declarative-shadow-dom	Server-rendered shadow roots with the shadowrootmode attribute

Runnable demo

The example below defines two custom elements: <name-tag> renders bold text from its name attribute, and <greeting-card> creates a <name-tag> and appends a welcome message — composing two elements into one widget.

HTMLJS

<greeting-card name="Alice"></greeting-card>

🧩 Components all the way down

Custom elements can contain other custom elements. The browser upgrades them in document order, so inner elements upgrade before the outer one’s JavaScript relies on them — but use connectedCallback (not constructor) to be safe.

What does "composition" mean in Web Components?

Using CSS Grid to lay out components Building larger elements from smaller nested custom elements Inheriting from multiple HTMLElement classes Sharing JavaScript modules between files

Which lifecycle callback is the right place to append child custom elements?

constructor disconnectedCallback connectedCallback adoptedCallback

In this module, which lesson covers participating in a native HTML form?

composition declarative-shadow-dom accessibility form-associated

Submit

Mark as complete