Browser Platform & Web APIs

Put the payload in the CustomEvent constructor's detail option — new CustomEvent('cart:add', { detail: { id, qty } }) — and dispatch it on a node with dispatchEvent. Listeners read it as event.detail. A plain Event has no detail.

event.target is the deepest node the event was dispatched on and is identical for every listener in the path. event.currentTarget is the node whose listener is executing right now, so it differs from listener to listener.

addEventListener registers any number of independent listeners on one element and accepts an options argument — capture, once, passive, signal. element.onclick is a single property slot, so each assignment silently replaces the previous handler.

Both return the first matching element or null, but getElementById takes a raw id string and exists only on Document, while querySelector parses a CSS selector, so an id such as 3d-view needs CSS.escape or an attribute selector.

Node is the base type for everything in the DOM tree; Element is the subtype for tags. A parsed HTML document also contains Text nodes (including whitespace between tags), Comment nodes, the Document itself, and its DocumentType node.

customElements.define(name, class) requires a lowercase name that contains a hyphen and a class that extends HTMLElement. An invalid name throws SyntaxError; registering a name twice, or one class under two names, throws NotSupportedError.

HTML attributes can hold only strings, so an array survives as an attribute only if you serialize it to text and parse it back. Pass rich data as a JavaScript property instead — el.users = [...] — which hands over the real object by reference.

attachShadow creates a ShadowRoot: a separate DOM subtree rendered in place of the element's own children. Its boundary scopes selectors both ways, so outer CSS and document.querySelector cannot reach inside, and styles defined inside cannot leak out.

Inheritance crosses a shadow boundary; selector matching does not. font-family is an inherited property, so its computed value flows from the host down into the shadow tree. A page selector can never match a node inside another tree's shadow root.

The <template> element parses its markup into an inert DocumentFragment exposed as template.content: nothing renders, scripts do not run, images are not fetched. To use it, clone that fragment with cloneNode(true) and insert the copy.

requestAnimationFrame runs a callback once per frame, just before paint and in step with the display's refresh rate. A 16 ms interval drifts against that rhythm, duplicating or skipping frames, and it keeps firing in hidden tabs.

display: none keeps the element out of the render tree entirely: no box, no space, nothing painted. visibility: hidden still generates a box that occupies its layout space and only skips painting, so revealing it costs a repaint rather than a relayout.

A classic script with no attributes is parser-blocking: the parser stops at the tag, waits for app.js to download and execute, then resumes. Placed before </body> the whole document is already parsed, so the user sees content first.

DOMContentLoaded fires as soon as the HTML has been fully parsed into a DOM and deferred scripts have run. It does not wait for images, iframes or stylesheets. The window load event fires later, once every subresource has finished loading.

Each write leaves layout invalidated, and the next iteration's getBoundingClientRect forces the browser to recompute it, so 500 elements cost roughly 500 synchronous layouts. Reading all the widths first and writing afterwards collapses that to a single layout.

fetch() resolves for any completed HTTP exchange, including 404 and 500, and rejects only when no response arrives at all — a network or DNS failure, or a blocked request. Detect HTTP failures yourself with response.ok or response.status.

EventSource dispatches a named message as an event of that name, so onmessage never sees it. Register eventSource.addEventListener('priceUpdate', handler) instead, and expect event.data as a string you parse yourself.

Drive it from an abort signal: fetch(url, { signal: AbortSignal.timeout(5000) }) aborts the request when the timer fires. The manual equivalent is an AbortController plus setTimeout calling controller.abort(), with the timer cleared afterwards.

The send() call throws an InvalidStateError, because the socket is still in the CONNECTING state — the constructor only starts the connection. Send once the open event has fired and readyState is WebSocket.OPEN.

An ordinary fetch is tied to the document that started it, so when the document is destroyed the browser aborts the request still in flight. sendBeacon marks the request as keepalive, handing it to the browser to complete after the page is gone.

Reading document.cookie returns one flat string of every cookie the current page may read, as name=value pairs joined by "; ". Attributes and HttpOnly cookies are absent, so extracting one value means splitting and decoding the string yourself.

structuredClone() returns a deep copy made by the browser's structured clone algorithm. Unlike a JSON round-trip it preserves Map, Set, Date, RegExp, typed arrays, Blobs and cyclic references, but it throws a DataCloneError on functions and DOM nodes.

Both hold string key/value pairs scoped to one origin and share the same API. localStorage persists until something clears it and is visible to every tab on that origin; sessionStorage is confined to a single tab and is discarded when that tab closes.

Cache API lookups key on the full URL including the query string, honour the stored response's Vary header, and only match GET requests. The ignoreSearch, ignoreVary and ignoreMethod options relax each rule; a wrong cache name is the fourth cause.

The Cache API is a script-owned store of Request/Response pairs that you fill, look up and delete explicitly, with no expiry of its own. The HTTP cache is browser-managed, driven by response headers, and unreachable from JavaScript.

No. postMessage sends a copy made at the moment of the call, so later edits to the original never reach the worker. The worker gets a message event asynchronously and reads the copy from event.data; the two threads share no objects.

No. A document's controller is chosen when it is navigated to, and on a first visit no worker is active yet, so navigator.serviceWorker.controller is null and every request on that load goes straight to the network.

Without a transfer list the ArrayBuffer is copied, so both sides hold their own bytes. With the buffer in the transfer list its memory is handed over instead: the worker gets the original bytes and the sender's buffer is detached, byteLength 0.

A dedicated Web Worker runs on its own thread with its own global, DedicatedWorkerGlobalScope, so window, document and the DOM are absent — the DOM is not thread-safe. Workers still get fetch, WebSocket, indexedDB, timers and crypto.

Attach a unique id to every outgoing message and keep a map from id to that request's promise resolvers. The worker echoes the id back in its reply; the single message handler looks up the id, settles that promise, and deletes the entry.

The browser produced the error, not the server and not your code. CORS permission is granted by headers on the server's response, so Access-Control-Allow-Origin can only be set by the API. Sending it as a request header changes nothing.

innerHTML, outerHTML, insertAdjacentHTML and document.write parse a string as HTML, so untrusted data becomes markup. HTML fragment parsing marks script elements inserted that way as already-started, so they never run, but event-handler attributes such as onerror still fire. Use textContent instead.

An origin is scheme plus host plus port: here https://shop.example.com on port 443. Only the :443/help URL is same-origin; switching the scheme to http or the host to api.example.com produces a different origin. Path is never part of it.

Powerful browser APIs are gated on secure contexts: HTTPS and WSS origins plus loopback hosts (localhost, 127.0.0.1, ::1). Plain HTTP on staging is not one, so those APIs are absent entirely; window.isSecureContext reports the verdict.

A credentialed cross-origin response must name the exact calling origin in Access-Control-Allow-Origin and also send Access-Control-Allow-Credentials: true. The wildcard is banned there because '*' means any site may read the response — which, with the user's cookies attached, would expose their logged-in data to every origin.

The back/forward cache keeps the whole page — DOM plus the JavaScript heap — frozen in memory when you navigate away, then restores that snapshot on Back. Scripts do not re-run, and DOMContentLoaded and load do not fire again.

history.pushState only rewrites the URL inside the browser; the server never learns the route exists. Reloading sends a real HTTP request for /reports/42, which 404s until the server is configured to return index.html for any unmatched path.

Listen for the visibilitychange event on document and read document.visibilityState, which is either "visible" or "hidden" (document.hidden is the boolean shorthand). It flips to hidden on tab switches, window minimising, app switching and screen lock.

An iframe element has no postMessage method; its window does. Call iframe.contentWindow.postMessage(data, 'https://widget.example.com') — the first argument is the copied payload, the second is the origin the frame must currently have or the browser silently drops the message.

The second argument is a base URL that a relative reference is resolved against. A relative string on its own has no scheme or host, so new URL('/checkout') throws a TypeError; with the base it resolves to https://shop.example.com/checkout.

observe() queues an initial observation, so the callback always fires once with a baseline entry describing the target's current position. For an off-screen element that entry has isIntersecting false, so the callback must branch on isIntersecting rather than assume it was called because the element became visible.

The window resize event fires only when the viewport changes size. An element's own box can change from dragging, sibling layout, content, or CSS while the viewport never moves. ResizeObserver watches a chosen element and reports its new dimensions.

The callback runs whenever the visible fraction of the target crosses one of the listed thresholds, in either direction — not continuously while scrolling. intersectionRatio is that fraction: the intersecting area divided by the target's own bounding-box area, between 0 and 1.

childList: true reports only direct children of el being added or removed. Attribute edits, in-place text changes, and anything deeper in the tree are ignored unless you also pass attributes, characterData or subtree. Calling observe with {} throws a TypeError.

Observing delivers an initial callback at the next rendering opportunity with the element's current size, even though nothing changed. unobserve(target) stops watching one element; disconnect() stops watching all of them and is what teardown should call, since the observer stays live otherwise.