"DOM"
- 拓樸理解先行於 CSS 規則
寫 CSS 之前看真實 DOM tree、不靠 class name 推測層級。本文以『drawer 在 form 內、不是 form 的 sibling』這個假設錯誤為例，展開『拓樸理解 → CSS 規則』的順序。
- JS 操作 framework 元件：邊界辨識與安全規則
操作 framework 管的 DOM 前先界定『動什麼、邊界在哪、state 由誰維護』。本文展開邊界辨識的決策樹、整節點 reparent 的具體 do/don't 規則、灰區操作的 fail-safe 設計。
- Selector 精準度：讓 query 只命中你想要的元素
JS 的 DOM query 是 sanity 防線、不是優化選項。從『起點 / 範圍 / 過濾』三層收斂、避免誤命中、避免未來頁面結構變動讓 query 撈到不該撈的東西。本文是 selector 設計的完整指引。
- MutationObserver 範圍與觸發頻率：監聽最少必要的變動
MutationObserver 是非同步監聽工具、跟同步 selector 是不同議題。範圍寬會頻繁觸發、option 勾多會在不關心的變動上跑邏輯、apply 自己改 DOM 會觸發無限循環。本文是 observer 設計的完整指引。
- Pattern：Document 全文件 query
`document.querySelector` 從整個頁面找元素 — 是探索期與一次性 script 的合理工具、不是 production 客製的預設。本文展開這個 pattern 的適用邊界。
- Pattern：元件根變數 query
把元件根 `var shell = document.querySelector('.shell')` 一次存變數、之後所有 query 從 shell 開始 — 是 production 客製的預設起點。本文展開這個 pattern 的設計細節與邊界。
- Pattern：起點當函式參數
把元件根當函式參數傳入 — `function setup(shell) { shell.querySelector(...) }`、外部呼叫 `forEach(setup)` 處理多實例。本文展開純函式設計與多實例支援的取捨。
- Pattern：closest 反向找根
事件處理時用 `e.target.closest('.shell')` 從事件目標反向找元件根 — 適合動態元件、SPA 路由切換、事件委派場景。本文展開反向定位 pattern 的應用邊界。
- Pattern：DOM attribute idempotency 標記
用 `:not([data-x])` 過濾 + 處理後 `setAttribute('data-x', 'true')` 保證每元素只處理一次 — 是 production apply 函式的預設 idempotency 工具。本文展開命名、生命週期、跟 framework 共處的設計細節。
- Pattern：WeakMap idempotency 紀錄
用 `WeakMap` 紀錄已處理的元素 — 不污染 DOM、適合第三方 library、跟 framework 衝突場景。本文展開 GC 行為、debug 替代方案、跟 attribute 標記的取捨。
- Pattern：跨 slot 同節點搬遷
Stateful UI 在兩個 slot 之間用 `appendChild` 搬同一個 DOM 節點、不複製兩份 — 避免 state 分歧。本文展開搬遷 pattern 的設計細節與適用邊界。
- DOM Topology First — 寫 CSS 前先確認 DOM 結構
frontend-with-playwright reference：寫 CSS 前用 playwright/DevTools 量真實 DOM、selector 三維度設計、起點四選一、idempotency 兩選一。