# 02 - M1.4 Revision Sheet & Interview Q&A

Short revision guide for **Milestone 1.4**.

---

## 1. Quick Summary

- **What We Built:** Attached a Shadow DOM Root (`attachShadow({ mode: "open" })`) inside `src/widget.js` and rendered an isolated placeholder element.
- **Goal Achieved:** Verified two-way DOM/CSS style encapsulation using host styles in `demo.html`.
- **Files Modified:** `widget/src/widget.js` and `widget/demo.html`.
- **Generated Bundle:** `widget/dist/widget.js` compiled via `npm run build`.

---

## 2. 5 Interview-Style Questions & Answers

#### Q1: What is the main problem Shadow DOM solves for embeddable widgets?
**Answer:** It prevents host page CSS rules from leaking into and corrupting the widget UI, and stops widget styles from interfering with the host website layout.

#### Q2: What happens when `attachShadow({ mode: "open" })` is called?
**Answer:** It creates an open `#shadow-root` attached to a host DOM element, allowing component rendering while maintaining CSS encapsulation.

#### Q3: Why don't global CSS selectors like `div` in the host document affect elements inside a Shadow Root?
**Answer:** Shadow DOM creates a style encapsulation boundary. Styles defined outside the shadow boundary do not match selectors inside the shadow tree.

#### Q4: How do you append elements inside a Shadow DOM container?
**Answer:** By calling `shadow.appendChild(element)` on the returned `shadow` root instance instead of `document.body`.

#### Q5: Did M1.4 add any chat bubble UI or backend dependencies?
**Answer:** No. M1.4 strictly established the isolated DOM container. Chat bubble UI elements and backend session logic are deferred to later milestone steps.