What is the Shadow DOM?

Short answer: The Shadow DOM is a web component feature that encapsulates a section of the DOM — meaning styles and markup inside it don’t leak out or get affected by the rest of the page. Example: <custom-card></custom-card> <script> class CustomCard extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({ mode: 'open' });

Example code

shadow.innerHTML = `<style>p { color: blue; }</style><p>Hello Shadow!</p>`; }
} customElements.define('custom-card', CustomCard); </script> Key Takeaway: Shadow DOM = style and structure isolation for reusable, predictable components.

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.