All topics
59 / 100
DOMadvanced

Web Components and Custom Elements

Native browser APIs for creating reusable, encapsulated HTML elements without relying on a JavaScript framework.

Web Components are the browser's own way to define a reusable element. Three specifications together.

Web Components are like standardized shipping containers: any custom element you build (the container) can be dropped onto any ship, truck, or dock (any framework or plain HTML page) because the interface (the platform's own APIs) is universal, rather than requiring a container built specifically to fit only one particular shipping company's fleet (a single framework's component model).

Key Concepts

1
    Custom Elements   define a new tag with behaviour
    Shadow DOM        an isolated subtree, for style and markup
    HTML Templates    inert markup, cloned when needed
2
    class UserCard extends HTMLElement {
      connectedCallback() {
        this.attachShadow({ mode: 'open' }).innerHTML = `
          <style>:host { display: block; }</style>
          <h2>${this.getAttribute('name')}</h2>`;
      }
    }
    customElements.define('user-card', UserCard);
3
    <user-card name="Asha"></user-card>
4
The name must contain a hyphen, which is how the parser tells a custom element from a future built-in.
5
The lifecycle callbacks.
    connectedCallback         added to the document
    disconnectedCallback      removed -- clean up here
    attributeChangedCallback  a watched attribute changed
    adoptedCallback           moved to another document
6
    static observedAttributes = ['name'];   // required for the third
7
What they offer that a framework component does not. They work anywhere — in React, in Angular, in plain HTML, in a CMS — with no build step and no runtime.
8
That is the real use: a design system shared across teams using different frameworks, or a widget embedded in someone else's page.
9
What they are missing compared with a framework.
    no reactivity        you update the DOM yourself
    no template syntax   string concatenation or manual nodes
    no state management
    verbose              a lot of boilerplate for a small component
10
Which is why libraries like Lit exist — they add reactivity and templating on top of the standard.
11
Framework interop has rough edges. Attributes are strings, so passing an object means setting a property instead. And events must be dispatched manually:
12
    this.dispatchEvent(new CustomEvent('save', {
      detail: data, bubbles: true, composed: true
    }));
13
composed: true is what lets an event escape the shadow boundary — without it, listeners outside never see it.
composed: true
14
The honest position. For an application, a framework is more productive. For something that must work across frameworks and outlive any of them, Web Components are the only standard answer.
15
What the interviewer is probing.1. "What are the three parts of web components?" Probing: the pieces. Stalls: "Just custom elements." Moves up: custom elements, shadow DOM for encapsulation, and templates.
16
2. "What is the naming rule for a custom element?" Probing: the requirement. Stalls: "Anything." Moves up: it must contain a hyphen, which guarantees no collision with current or future standard elements.
17
3. "Where do you set up and tear down?" Probing: the lifecycle. Stalls: "In the constructor." Moves up: connectedCallback and disconnectedCallback — the constructor runs before the element is in the document.
18
4. "Why would you use them with a framework already in place?" Probing: the real use. Stalls: "You would not." Moves up: a design system shared across teams on different frameworks, or embedding a widget in someone else's page.
Use cases:web-componentsdomadvanced