Web Component

The foundational API for defining new HTML tags with custom behavior. Developers create a class that extends HTMLElement and register it with the browser using customElements.define().

• Autonomous elements: Extend HTMLElement to create entirely new tags like <user-avatar>.
• Customized built-ins: Extend existing elements like HTMLButtonElement to enhance native behavior.
• Lifecycle callbacks: connectedCallback, disconnectedCallback, attributeChangedCallback, and adoptedCallback provide hooks into the element's existence.
• Observed attributes: Declare a static observedAttributes array to trigger callbacks when specific HTML attributes change.

This specification eliminates the need for framework-specific component models by providing a native, standards-based mechanism for defining reusable DOM elements.

A scoped subtree of DOM nodes that is rendered separately from the main document DOM, providing true encapsulation of markup, style, and behavior.

• Style isolation: CSS rules defined inside a shadow root do not leak out, and external styles do not penetrate in (except via inheritable properties).
• DOM encapsulation: document.querySelector() cannot traverse into a shadow tree, preventing accidental manipulation by external scripts.
• Slots and composition: The <slot> element creates insertion points where the light DOM (user-supplied children) is projected into the shadow tree, enabling content composition.
• Mode control: open mode allows external JavaScript to access the shadow root via element.shadowRoot; closed mode denies all external access.

Shadow DOM is the mechanism that finally brings true component-level encapsulation to the web platform without requiring iframes or build-time scoping tools.

The <template> element provides a mechanism for declaring inert DOM fragments that are parsed but not rendered, serving as reusable blueprints for component structure.

• Inert by default: Content inside <template> is not executed—scripts don't run, images don't load, and styles don't apply until the template is activated.
• Deep cloning: Use template.content.cloneNode(true) to create a live, active copy of the template's DOM subtree for each component instance.
• Zero runtime cost: The browser parses template content once at page load, making instantiation extremely efficient compared to innerHTML-based approaches.
• Declarative syntax: Templates are written directly in HTML, keeping component structure visible and authorable without JavaScript string concatenation.

This specification separates the definition of component structure from its instantiation, enabling efficient, declarative component authoring.

While not exclusive to Web Components, ES Modules are the standard mechanism for importing and exporting component definitions, completing the interoperability story.

• Static analysis: import and export statements are statically analyzable, enabling tree-shaking and dead code elimination by bundlers.
• Dependency resolution: The browser natively resolves module graphs, fetching dependencies in parallel without requiring complex build tooling for development.
• Scoped execution: Each module has its own lexical scope, preventing global namespace pollution and variable collisions between component definitions.
• Dynamic imports: import() returns a promise, enabling on-demand loading of component definitions for code-splitting scenarios.

Together with the other three specifications, ES Modules enable a fully native, framework-free component architecture where elements are self-contained, importable, and instantly usable across any application.

A core Web Component specification that provides encapsulation for a component's internal DOM structure and CSS. The Shadow DOM creates a scoped subtree that is isolated from the main document, preventing style conflicts and ensuring that a component's markup and behavior are not accidentally altered by external page styles. Key characteristics include:

• Style isolation: CSS rules defined inside a Shadow DOM do not leak out, and external styles do not penetrate in (except via CSS custom properties)
• DOM encapsulation: JavaScript outside the component cannot query its internal elements using document.querySelector()
• Slots: The <slot> element defines insertion points where the component's light DOM children are projected into the shadow tree

The browser API that enables developers to define new, fully-featured HTML tags with custom behavior. Custom Elements are registered with customElements.define() and must include a hyphen in their name to avoid conflicts with standard HTML. Two types exist:

• Autonomous custom elements: Extend HTMLElement to create entirely new elements like <user-avatar>
• Customized built-in elements: Extend existing HTML elements like HTMLButtonElement to enhance native behavior
• Lifecycle callbacks: connectedCallback(), disconnectedCallback(), adoptedCallback(), and attributeChangedCallback() provide hooks for managing state and resources

The <template> element provides a mechanism for declaring inert DOM fragments that are parsed but not rendered. Templates are the blueprint for Web Components, allowing developers to define reusable markup structures that are cloned and activated at runtime. Critical properties:

• Inertness: Content inside <template> is not loaded, executed, or rendered until the template is activated
• Cloning: template.content.cloneNode(true) creates a deep copy of the template's DOM for insertion into the document
• Performance: Templates are parsed once and can be instantiated thousands of times with minimal overhead, making them ideal for large-scale dynamic content assembly

A server-side rendering solution for Web Components that allows Shadow DOM trees to be expressed directly in HTML markup without JavaScript. Using the <template shadowrootmode="open"> attribute, the browser can attach a shadow root during HTML parsing, eliminating the flash of unstyled content that occurs when components hydrate client-side. This is essential for:

• Server-Side Rendering (SSR) of component-based pages
• Progressive enhancement: Components are functional before JavaScript loads
• SEO: Search engine crawlers can fully parse and index encapsulated content without executing JavaScript

An architectural style extending the microservices concept to the front end, where a web application is decomposed into independently deployable features owned by autonomous teams. Web Components are a natural implementation vehicle for micro-frontends because they provide native encapsulation and framework-agnostic interoperability. Key patterns include:

• Composition at runtime: A shell application assembles components from different teams at the edge or in the browser
• Module Federation: Webpack's mechanism for dynamically loading federated modules across separate builds
• Technology agnosticism: Teams can build components in React, Vue, or vanilla JavaScript, and they interoperate seamlessly through the DOM

A server-side or edge-side pattern where a final user interface is assembled by aggregating rendered fragments from multiple, independent services or templates. In the context of Web Components, view composition involves stitching together pre-rendered component markup at the CDN edge or origin server before delivering a complete HTML page. This pattern enables:

• Edge-Side Includes (ESI): Assembling cached component fragments with different TTLs at the CDN layer
• Independent deployability: Each component's rendering logic can be updated without affecting the composition layer
• Reduced client overhead: The browser receives a fully assembled page, avoiding the waterfall of client-side component fetches