# Milestone 1.4 — Shadow DOM Container Learning Guide

This directory documents the implementation of **Milestone 1, Step 1.4: Shadow DOM Container**.

---

## Documents in this folder

- **[01-shadow-dom.md](file:///c:/Users/alokc/chatbot/backend/docs/learning/m1-4-shadow-dom/01-shadow-dom.md)** — Core concepts: Shadow DOM tree architecture, CSS isolation, `attachShadow({ mode: "open" })`, and practical code examples.
- **[02-m1-4-revision.md](file:///c:/Users/alokc/chatbot/backend/docs/learning/m1-4-shadow-dom/02-m1-4-revision.md)** — Short revision summary and top 5 interview Q&As.

---

## How to Verify Milestone 1.4

1. **Build the bundle:**
   ```bash
   cd widget
   npm run build
   ```

2. **Open test harness in browser:**
   Open `widget/demo.html`.
   - Host page containers render in red.
   - Widget placeholder inside Shadow DOM renders in blue (`#2563eb`), unaffected by host page CSS rules.

3. **Verify DevTools Inspector:**
   Inspect element `div#universal-chatbot-widget-host`. You will see `#shadow-root (open)` containing the scoped `<style>` and `.widget-placeholder`.

---

## What You Should Understand Before Moving to M1.5

- **DOM Isolation:** All widget UI components built in M1.5 (chat bubble button, chat window) will be appended inside `shadow` root to remain isolated from host site styles.