CSE 134B

An APIs series

Web Components

Every framework you have used ships a component model. So does the browser. It has no build step, no runtime to download, no migration when the ecosystem moves on, and it has been in every shipping browser for years. This series is about that model — what it actually gives you, where it is genuinely better than the framework you know, and where it is genuinely worse.

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.