Web Components

The thesis

A component is a name, some markup, some behavior, and a boundary around them. The platform provides all four: customElements for the name, <template> and slots for the markup, a lifecycle for the behavior, and shadow DOM for the boundary. They are four separate specifications, usable independently, and much of the confusion around web components comes from treating them as one all-or-nothing package. They are not. You can take the custom element and skip the shadow DOM, and that is frequently the right call.

The series is built the other way round from most tutorials. It starts with markup that has no JavaScript at all, and adds one capability at a time, so at every step you can see exactly what the new thing bought you.

Who this is for

Students who know HTML, CSS, and JavaScript, and have probably met a framework's component model first. It assumes the DOM material from the browser series — what the DOM is, and that it is a tree the browser hands you rather than something your code invents.

How the demos work

Every demo in this series runs in its own frame, as a real, complete HTML file you can open on its own and edit. That is not a presentational choice: custom element names are registered in a global registry, one definition per name per document, and several demos on one page defining their own <my-card> would collide. Frames give each demo its own document, which is the same reason the technique is worth knowing outside a tutorial.

The nine steps

1. 01Semantic HTML foundation

   Custom element names as semantic markers, with no JavaScript whatsoever. Why <product-card> beats <div class="product-card"> before a single line of script is written.

2. 02Custom elements

   customElements.define(), the element class, constructor versus connectedCallback, and what "upgrade" means when the definition arrives after the markup.

3. 03Component basics

   Attributes versus properties, reflection, observed attributes, and custom states — designing an element's public API.

4. 04Shadow DOM considerations

   What the boundary buys and what it costs. Open versus closed, styling across the boundary, and the cases where the right answer is not to use it.

5. 05Component lifecycle

   The full callback set, resource management, and the leak you will write at least once: a listener that outlives its element.

6. 06Slots and templates

   Composition versus configuration: <template>, named and default slots, and slotchange.

7. 07Styling and theming

   Designing a theming surface someone else can rely on: custom properties as a versioned API, :host() variants, dark mode across the boundary, and sharing one stylesheet between roots.

8. 08Form-associated elements

   ElementInternals, validity, and taking part in real form submission.

9. 09Declarative shadow DOM

   <template shadowrootmode>, hydration, and what it means for a static site generator like the one serving this page.