What are Web Components?

0-2 years experience

1. 1Imagine you need to add a reusable date‑picker widget to a small internal tool that currently uses plain HTML and vanilla JS. How would you create it as a Web Component, and what files or steps are required?
2. 2If you place a <my-button> custom element on a page and its internal styles are leaking out, what could be causing that and how would you fix it?

2-5 years experience

1. 1You’re adding a custom <user-card> element to a product page that already uses a CSS framework. After deployment, some of the card’s styles are overridden by the framework’s global rules. Walk me through how you’d debug and resolve the issue.
2. 2During a sprint, the team decides to replace a legacy jQuery modal with a Web Component. What considerations would you raise about integration, event handling, and backward compatibility?

5-8 years experience

1. 1Our dashboard renders hundreds of <chart-widget> components, each with its own Shadow DOM. We’re seeing a noticeable drop in frame rate. What performance bottlenecks might Web Components introduce at this scale, and how would you mitigate them?
2. 2We need to share a library of custom elements across multiple micro‑frontends that are built with different frameworks. How would you design the component packaging, versioning, and loading strategy to avoid duplication and ensure consistent behavior?

8+ years experience

1. 1The company plans to migrate a legacy monolith UI to a component‑first architecture using Web Components. What architectural guidelines would you establish for naming, theming, and inter‑component communication to keep the system maintainable across many teams?
2. 2If you had to decide between building a UI library with native Web Components versus a framework‑specific component model (e.g., React), what long‑term trade‑offs would you evaluate regarding ecosystem lock‑in, tooling, and performance?