Web Components

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.

Four: connectedCallback when the element becomes connected to a document, disconnectedCallback when it is removed, adoptedCallback(oldDoc, newDoc) when it moves to another document, and attributeChangedCallback(name, oldValue, newValue) for attributes listed in the static observedAttributes array.

CustomEvent defaults to bubbles: false and composed: false, so an event fired inside a shadow root stops at that boundary. A component's public events must be created with bubbles: true and composed: true to reach listeners in the outer page.

The browser retargets an event's target as it crosses a shadow boundary, rewriting it to the nearest ancestor in the same tree as the listening node, so encapsulation holds. Use event.composedPath()[0] to reach the real innermost element.

Open mode exposes the root as element.shadowRoot; closed mode makes that property return null, so only the code holding the returned root can reach inside. Closed is a discouragement, not a security boundary — same-page script can still get in.

Custom properties are inherited properties, so a value set on the host or any ancestor flows into the shadow tree. The component author must opt in by consuming it in a var() call — only the hooks they wired are themeable, and the names become public API.

A part name exposes that one element to outside CSS: the page writes my-el::part(label) { ... } and may set any property on it. The page still cannot select the part's descendants, cannot reach unexposed elements, and cannot see parts of nested shadow roots unless they are re-exported.

A <slot> without a name takes the host's direct children that have no slot attribute; <slot name="x"> takes the direct children whose slot="x" matches exactly. A child matching no slot is never rendered, silently. An empty slot renders its own children as fallback.

An autonomous custom element extends HTMLElement and is used as its own tag, such as <my-button>. A customized built-in extends a specific interface like HTMLButtonElement, is registered with { extends: 'button' }, and is used as <button is="my-button">, inheriting that element's behaviour.

The constructor may call super(), set instance fields and attach a shadow root, but must not touch attributes, add children, or inspect the document. Doing so breaks document.createElement, which throws NotSupportedError if the constructed element already has attributes or children.

The HTML parser turns that template into a real shadow root on its parent element instead of leaving a template in the DOM. It lets a server ship shadow DOM and its scoped styles in the HTML itself, so a component renders correctly before any JavaScript runs.

:host matches the shadow host from inside its shadow tree, and :host(sel) matches only when the host also matches sel. :host-context(sel) matches when the host or any ancestor matches sel. A plain tag selector fails because the host lives outside the tree.

::slotted() matches only the top-level nodes assigned to a slot, and takes a single compound selector — no combinators, no descendants. It also loses to the page's own rules on those elements, because slotted nodes still belong to the document tree.

The <span> never moves. It stays a child of the host in the ordinary document tree, so document.querySelector and host.querySelector find it, while shadowRoot.querySelector does not. Slotting only projects it into the flattened tree the browser renders.

With the definition already registered, the HTML parser upgrades the element the moment it sees the start tag, so connectedCallback runs before the children are parsed. When the definition arrives after parsing, the upgrade finds a complete element, so the children are already there.

connectedCallback runs again on every reinsertion, so a move stacks up duplicate listeners and duplicate fetches. Everything it registers must be released in disconnectedCallback, and setup must be idempotent — and disconnectedCallback never runs on page unload.

An input inside a shadow root is not associated with a form in the outer document, so nothing it holds is submitted. Declare static formAssociated = true on the element, call this.attachInternals(), and report the value with internals.setFormValue().

Check for an existing root first — const root = this.shadowRoot ?? this.attachShadow({ mode: 'open' }) — and skip re-rendering when the server markup is already there, only wiring listeners. The other race is properties assigned before the element upgraded, which shadow the class accessors.

Every shadow root gets its own style element and its own CSSOM stylesheet object, so rules are duplicated per instance in memory and on every DOM insertion. adoptedStyleSheets lets many roots share one constructed CSSStyleSheet, parsed once and updated in one place.

One new CSSStyleSheet() parsed once and assigned to every root's adoptedStyleSheets replaces 500 parses and 500 rule sets with a single shared CSSOM object. Mutating that one sheet with replaceSync updates every adopting root at once.

slotchange signals that a slot's assigned node list changed — a slottable child added, removed, reordered, or re-routed by a slot attribute. It says nothing about mutations inside an already-assigned node, so editing that element's text or attributes fires nothing.

Custom properties expose values and keep internals refactorable; parts expose whole elements and let consumers apply anything, which freezes that element's structure and box behaviour as de-facto API. Default to tokens; grant parts only where needs are genuinely unbounded.

Slot what the caller must own — arbitrary content whose markup you cannot predict; render yourself what the component is responsible for, such as structure, layout and accessibility wiring. A published slot name is public API: renaming one makes consumer content vanish silently.