Web Components

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Web Components

Browser standards for making your own reusable HTML tags with private insides.

Custom element

Your own HTML tag, like <user-badge>, backed by a JavaScript class.

Upgrade

When the browser turns an already-parsed custom tag into a real instance of its class, once the class is defined.

Lifecycle callback

A method the browser calls at a moment in the element's life, such as when it's added to the page.

Shadow DOM

A private DOM tree attached to an element; its markup and styles are separate from the page.

Shadow root

The top of an element's shadow DOM, created with attachShadow.

Light DOM

The ordinary children written inside a custom element's tag by the page author.

template

An HTML element whose content is parsed but not shown or run, ready to be cloned.

slot

A placeholder in shadow DOM where the element's light-DOM children are displayed.

Composed event

An event allowed to travel out of a shadow root into the main page.

1. 1

   Watch disconnect

   In the first example, add a disconnectedCallback() { console.log("disconnected"); } method and badge.remove(); at the end. Predict where the new line appears in the console.

2. 2

   Fill the default

   In the second example, delete the <span slot="title"> line. Predict what the heading shows (look at the slot's fallback content), then run.

3. 3

   Make it closed

   In the first example, change mode: "open" to "closed". Predict: what is badge.shadowRoot now, and which line breaks? (Keep a reference to root in the class to fix it.)

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   Web Components is the name for three browser standards that work together, with no library needed: custom elements (define a new tag and the JavaScript class behind it), shadow DOM (a private, separate DOM tree attached to an element, with its own styles), and **<template> and <slot>** (inert markup to clone, and placeholders for the user's content). They work in every modern browser and with any framework, because to React, Vue or plain HTML they are just elements.

2. 2

   A custom element is a class that extends HTMLElement, registered with customElements.define("user-badge", UserBadge). The name must contain a hyphen, so it can never clash with a future built-in tag, and each name can be defined only once per page. Elements already in the HTML before the definition are upgraded when it arrives; until then they are "undefined" elements you can style with :not(:defined) to avoid a flash of unstyled content. customElements.whenDefined(name) returns a promise for that moment.

3. 3

   Lifecycle callbacks are methods the browser calls for you. constructor() runs when the element is created: call super() first, set up state and the shadow root, but don't read attributes or children yet (they may not exist). connectedCallback() runs each time the element is put into the page: render and add listeners here. disconnectedCallback() runs when it's removed: clean up timers and outside listeners. attributeChangedCallback(name, oldValue, newValue) runs when an attribute listed in static observedAttributes changes. On upgrade, the order is constructor, then one attribute callback per existing observed attribute, then connected.

4. 4

   Shadow DOM: this.attachShadow({ mode: "open" }) creates a shadow root, a hidden mini-document inside the element. Markup inside it is not found by document.querySelector, and its <style> applies only inside, while the page's CSS doesn't reach in (except inherited properties like color and font, and CSS custom properties, which pass through on purpose so you can theme components). That is encapsulation: the component can't break the page and the page can't break the component. :host styles the element itself from inside; ::part(name) lets the page style parts you expose with part="name". mode: "open" exposes element.shadowRoot; "closed" hides it, which is not a security boundary.

5. 5

   **<template>** holds markup the browser parses but doesn't render or run: images don't load, scripts don't execute. Clone it with template.content.cloneNode(true) to stamp out copies cheaply. A **<slot> inside shadow DOM is a placeholder: the element's own children (the light DOM**) are shown there. <slot name="title"> receives children with slot="title"; an unnamed slot receives the rest. Slotted nodes stay in the light DOM, so the page's CSS still styles them; inside, ::slotted(p) can style them lightly. The slotchange event fires when assigned content changes.

6. 6

   Components talk to the outside with attributes and properties in, and events out: dispatch a CustomEvent with a detail payload. Events fired inside shadow DOM need composed: true to cross the shadow boundary (and bubbles: true to bubble), and outside listeners see event.target retargeted to the host element, so internals stay hidden. For forms and accessibility, a custom element can join a <form> with static formAssociated = true and attachInternals(), and should carry proper roles, labels and keyboard support (Hectal's /html course covers ARIA). Accessibility is not automatic.

• ↔

  Shadow DOM gives true style isolation, but global styles (resets, utility classes, a site theme) no longer reach inside, so theming must be designed through custom properties and parts.

• ↔

  Web Components work in every framework and need no build step, but you write rendering, state updates and attribute/property syncing yourself, or adopt a small library like Lit.

• I can define a custom element with a valid hyphenated name.

• I can use the lifecycle callbacks and observedAttributes correctly.

• I can attach shadow DOM and explain what does and doesn't cross its boundary.

• I can build an element from a <template> with named and default slots.

• I can dispatch a composed CustomEvent and explain retargeting.