Introduction to Web Components

Technical Deep Dive & Specifications

The Historical Evolution of Componentization

The desire for reusable, encapsulated UI controls on the web is as old as the commercial internet. However, early solutions were proprietary, fragmented, and vendor-locked:

  1998                 2001                2011                  2016                 Present
+-------+            +-------+           +-------+             +-------+             +-------+
|  HTC  | ---------> |  XBL  | --------> | WC v0 | ----------> | WC v1 | ----------> | Modern|
| (IE5) |            |Mozilla|           |Google |             |W3C /  |             | Living|
|       |            |Firefox|           |Polymer|             |WHATWG |             | Std   |
+-------+            +-------+           +-------+             +-------+             +-------+
 Proprietary          Proprietary         Chrome-only           Universal             Adopted
 JScript/Win32        XML/XUL             Experimental          Consensus             Worldwide

1. HTML Components (HTC) (1998, Microsoft Internet Explorer 5.0):
   • Microsoft introduced .htc files allowing developers to attach JScript behavior and custom properties to HTML elements via the proprietary CSS property behavior: url(widget.htc).
   • While pioneering, it was non-standard, security-vulnerable, and exclusive to Windows Internet Explorer.
2. XML Binding Language (XBL) (2001, Mozilla Firefox / Netscape):
   • Mozilla created XBL to define the UI widgets of the Firefox browser itself (the XUL interface). Elements could bind to XML templates and execute JavaScript methods.
   • XBL 2.0 attempted W3C standardization in 2007 but was abandoned due to complexity and lack of multi-vendor consensus.
3. Web Components v0 (2011–2014, Google Chrome / Polymer):
   • Alex Russell (Google) proposed the initial Web Components specifications: document.registerElement(), element.createShadowRoot(), and <link rel="import">.
   • Flaw: HTML Imports competed with ES Modules, createShadowRoot lacked consensus on encapsulation boundaries, and Safari/Firefox refused to implement without a cleaner specification.
4. Web Components v1 (2016–Present, WHATWG / W3C Living Standard):
   • Complete multi-vendor consensus achieved between Apple (WebKit), Google (Blink), Mozilla (Gecko), and Microsoft.
   • Standardized on customElements.define(), attachShadow({ mode: 'open' | 'closed' }), <template>, and native ES Modules (import).

Web Components v0 vs. Web Components v1 Comparison

Browser Engine Parsing Mechanics

When a browser parser encounters an element tag while constructing the DOM tree:

1. Standard HTML Tag (<div>, <button>): The parser constructs the corresponding built-in interface (HTMLDivElement, HTMLButtonElement).
2. Unregistered Custom Tag (<user-avatar>):
   • If the tag contains a hyphen (-) in its name, the browser assigns it the interface HTMLElement and places it in an unresolved state.
   • If the tag contains no hyphen and is not a known HTML tag (e.g. <avatar>), the parser assigns it HTMLUnknownElement.
3. Registered Custom Tag:
   • When customElements.define('user-avatar', UserAvatar) executes, the browser upgrades all existing <user-avatar> nodes in the DOM tree, invoking their constructor() and connectedCallback().

                        PARSER ENCOUNTERS TAG
                                  |
            +---------------------+---------------------+
            |                                           |
      Known HTML Tag?                            Has a Hyphen (-)?
      (e.g., <button>)                           (e.g., <user-card>)
            |                                           |
            v                                     +-----+-----+
    HTMLButtonElement                             |           |
                                                 YES          NO
                                                  |           |
                                                  v           v
                                             HTMLElement  HTMLUnknownElement
                                            (Upgradable)  (Generic Element)

💻 Interactive Code Playground

Let's build a functional, standards-compliant <user-avatar> custom element using pure native Web Components v1 APIs without any build tools or external dependencies.

Starter Code

Line-by-Line Code Breakdown

• Line 46: class UserAvatar extends HTMLElement: Defines an autonomous custom element inheriting all standard DOM node methods (addEventListener, getAttribute, classList).
• Line 48: static get observedAttributes(): Returns an array of attribute names the browser will monitor. When modified via JavaScript (element.setAttribute()) or HTML parser, the browser triggers attributeChangedCallback.
• Line 53: super(): Required by JavaScript class semantics. Initializes the underlying HTMLElement instance before accessing this.
• Line 56: this.attachShadow({ mode: 'open' }): Creates an encapsulated Shadow Root attached to this element. Styles defined inside cannot leak out, and global styles cannot accidentally break internal element structures.
• Line 60: connectedCallback(): Invoked automatically by the browser engine whenever the element is connected into the document's live DOM tree.
• Line 65: attributeChangedCallback(...): Handles reactivity. Whenever src, name, or status changes, the component re-renders.
• Line 91: :host: A special CSS pseudo-class representing the custom element itself (<user-avatar>) from within its internal Shadow DOM.
• Line 144: customElements.define('user-avatar', UserAvatar): Registers the class to the hyphenated tag name in the browser's window.customElements registry.

Expected Browser Render Output

The browser renders three circular avatar components side-by-side:

1. Sarah Connor: Displays a portrait image with a bright green "online" dot at the bottom right.
2. Miles Dyson: Displays a portrait image with a vivid red "busy" dot at the bottom right.
3. John Doe: Has no src, so it gracefully displays a slate-gray circle with white bold initials "JD" and a gray "offline" status indicator.