Web Components Interview Questions

Junior Web Components Developer Interview Questions

Senior Web Components Developer Interview Questions

Web Components Architect Interview Questions

Web Components Coding Interview Questions with Solutions

1. Create a Basic Custom Element

class HelloMessage extends HTMLElement {
  connectedCallback() {
    this.innerHTML = "<p>Hello Web Components</p>";
  }
}

customElements.define("hello-message", HelloMessage);

2. Create a Shadow DOM Component

class AppCard extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: "open" });

    this.shadowRoot.innerHTML = `
      <style>
        .card {
          border: 1px solid #dee2e6;
          padding: 1rem;
          border-radius: 0.75rem;
        }
      </style>

      <article class="card">
        <slot></slot>
      </article>
    `;
  }
}

customElements.define("app-card", AppCard);

3. Use observedAttributes

class UserBadge extends HTMLElement {
  static get observedAttributes() {
    return ["name"];
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback() {
    this.render();
  }

  render() {
    const name = this.getAttribute("name") || "Guest";
    this.innerHTML = `<span>${name}</span>`;
  }
}

customElements.define("user-badge", UserBadge);

4. Dispatch a Custom Event

class AppButton extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<button type="button">Click</button>`;

    this.querySelector("button").addEventListener("click", () => {
      this.dispatchEvent(new CustomEvent("app-click", {
        detail: { clicked: true },
        bubbles: true,
        composed: true
      }));
    });
  }
}

customElements.define("app-button", AppButton);

5. Create Named Slots

class ProfileCard extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: "open" });

    this.shadowRoot.innerHTML = `
      <article>
        <h2><slot name="title">Default Title</slot></h2>
        <div><slot>Default content</slot></div>
      </article>
    `;
  }
}

customElements.define("profile-card", ProfileCard);

6. Expose CSS Parts

class PartButton extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: "open" });

    this.shadowRoot.innerHTML = `
      <button part="button">
        <slot>Button</slot>
      </button>
    `;
  }
}

customElements.define("part-button", PartButton);

7. Use CSS Custom Properties

class ThemeButton extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: "open" });

    this.shadowRoot.innerHTML = `
      <style>
        button {
          background: var(--button-bg, #0d6efd);
          color: var(--button-color, white);
        }
      </style>

      <button><slot>Button</slot></button>
    `;
  }
}

customElements.define("theme-button", ThemeButton);

8. Prevent Duplicate Definition

if (!customElements.get("safe-card")) {
  customElements.define("safe-card", class SafeCard extends HTMLElement {
    connectedCallback() {
      this.innerHTML = "<p>Safe Card</p>";
    }
  });
}

9. Wait Until Component Is Defined

customElements.whenDefined("app-card").then(() => {
  console.log("app-card is ready");
});

10. Clean Up Event Listeners

class ResizeLogger extends HTMLElement {
  constructor() {
    super();
    this.handleResize = this.handleResize.bind(this);
  }

  connectedCallback() {
    window.addEventListener("resize", this.handleResize);
  }

  disconnectedCallback() {
    window.removeEventListener("resize", this.handleResize);
  }

  handleResize() {
    console.log(window.innerWidth);
  }
}

customElements.define("resize-logger", ResizeLogger);

Web Components Interview Questions FAQ

What should junior developers focus on?

Focus on Custom Elements, Shadow DOM, slots, lifecycle callbacks, attributes, properties, and basic custom events.

What should senior developers focus on?

Focus on attribute-property sync, event retargeting, accessibility, cleanup, performance, testing, styling APIs, and Shadow DOM behavior.

What should architects focus on?

Focus on design systems, framework interoperability, API governance, theming, versioning, accessibility standards, SSR, and cross-team adoption.

Are Web Components framework independent?

Yes. Web Components are browser-native and can be used with JavaScript frameworks or without any framework.

Are Web Components good for design systems?

Yes. They are useful for design systems because they provide reusable, encapsulated, framework-independent UI components.

Conclusion

This Web Components interview guide covers junior, senior, and architect level questions with answers, coding examples, Custom Elements, Shadow DOM, slots, templates, Declarative Shadow DOM, CSS Custom Properties, ::part(), ::slotted(), lifecycle callbacks, custom events, accessibility, performance, testing, SSR, and design system architecture.

To prepare effectively, build small Web Components, practice lifecycle methods, create custom events, expose styling APIs, test accessibility, and understand how Web Components work across different frameworks and browser environments.