1. 題目與適用場景
團隊維護一個伺服器端渲染的管理後台，多個元件都使用 .title、.button 等通用類別。新增行銷卡片後，舊頁面的按鈕間距與標題顏色被覆蓋。請設計一套漸進遷移方案，用 @scope 建立樣式邊界，同時保留伺服器首屏、主題變數與舊瀏覽器可用性。假設元件仍共享文件 DOM，不使用 Shadow DOM。
2. 面試官考察點
- 是否理解
@scope限制選擇器匹配範圍，卻不會自動建立 Shadow DOM 隔離。 - 是否能解釋作用域根、可選限制選擇器、巢狀作用域與層疊順序，而非只背語法。
- 是否會把元件狀態、主題變數、全域 reset 與第三方樣式分開治理。
- 是否能設計特性偵測、舊瀏覽器降級、視覺回歸與逐步遷移指標。
3. 回答前需要釐清的問題
- 目標瀏覽器是否都支援
@scope？不支援時必須完全相同視覺，還是允許舊 CSS 路徑？ - 元件是否共享 DOM、需要跨邊界繼承主題變數，還是需要真正的 DOM 與事件隔離？
- 現有樣式按頁面、元件還是第三方套件載入？遷移期間新舊規則會並存多久？
- 選擇器限制是只覆蓋元件根節點後代，還是要在某個子樹結束處停止？
4. 30 秒回答框架
我先把 @scope 定位為選擇器範圍控制，不把它當成 Shadow DOM。每個元件用穩定根類別包住內部規則；需要在子樹邊界停止時使用 to 限制選擇器。主題變數保留在明確的全域或元件根上，元件狀態用區域類別或屬性表達。支援時載入作用域規則，不支援時走同一套語意的編譯後或命名空間 CSS；遷移期間用層疊層、視覺回歸與命中率監控防止新舊規則互相覆蓋。
5. 分步驟深入解答
第一步：劃分隔離目標
先確認問題是選擇器誤匹配、繼承污染還是 DOM/事件安全邊界。@scope 解決前兩者中的選擇器範圍，仍允許變數繼承，也不阻止腳本存取同一文件節點。若元件必須隔離 DOM、樣式與事件，選擇 Shadow DOM；若主要目標是建置時模組化與類名生成，CSS Modules 可能更簡單。
第二步：定義作用域根與限制
把元件根作為作用域根，讓內部選擇器保持可讀：
@scope (.profile-card) {
.title { color: var(--card-title); }
.button { padding-inline: 0.75rem; }
}需要在 .profile-card 內排除巢狀第三方編輯器時，可寫 @scope (.profile-card) to (.editor) { ... }。限制選擇器只規定規則停止匹配的位置，不會複製節點，也不會阻斷自訂屬性的繼承。巢狀作用域要記錄根與邊界，避免同一元素被多個元件意外命中。
第三步：處理層疊、狀態與主題
作用域不會取代層疊。把基礎 reset、元件預設值與覆蓋規則放入明確的 @layer；用 :where() 降低可覆蓋性，避免為了贏得層疊不斷增加選擇器複雜度。狀態優先使用元件根上的 [data-state] 或區域類別，並規定狀態規則所在層。主題變數可以由頁面根提供，也可以在作用域根覆蓋；不要把元件內部變數無意中提升為全域契約。
第四步：設計相容與遷移
先用 @supports selector(:scope) 或建置目標矩陣確認能力，實際發布仍以目標瀏覽器測試為準。舊瀏覽器路徑可使用建置工具展開的命名空間選擇器，例如 .profile-card .title，但兩條路徑必須來自同一來源檔案或同一規則清單。遷移時按元件切片，先讓新規則與舊規則並存並比較截圖，再刪除舊全域選擇器；不要一次把所有頁面包進一個巨大作用域。
第五步：驗證邊界與回滾
測試同名類別巢狀、作用域根本身、to 邊界外元素、主題切換、狀態組合、動態插入節點與第三方子樹。記錄建置產物中作用域規則的覆蓋率、瀏覽器能力分布、樣式回歸差異與未命中規則。若回歸率升高，回滾元件規則或關閉增強路徑，不要用提高選擇器優先級掩蓋邊界錯誤。
6. 高品質示範回答
我會先確認需要的是選擇器邊界還是完整 DOM 隔離。共享文件 DOM 的元件可以用@scope (.profile-card)包住內部規則，需要時用to停止在巢狀編輯器邊界；它不像 Shadow DOM 那樣隔離事件或阻斷變數繼承。基礎層、元件預設值與狀態覆蓋放在明確的@layer，主題變數只在頁面根或元件根定義。舊瀏覽器走同一規則的命名空間建置產物，遷移按元件分批，配合截圖回歸、能力分布與未命中規則監控。發現邊界回歸時回滾該元件，而不是繼續堆高選擇器優先級。
7. 常見錯誤
- 把
@scope當成 Shadow DOM → DOM、事件與變數仍共享 → 按真正隔離目標選擇 Shadow DOM 或@scope。 - 只改選擇器，不處理層疊層 → 舊規則仍可能在更高層覆蓋 → 同時定義
@layer與狀態優先級。 - 用一個全域作用域包住整個應用程式 → 元件邊界沒有資訊增益，遷移難以回滾 → 按元件根拆分並記錄邊界。
- 舊瀏覽器直接忽略規則 → 關鍵樣式消失 → 提供同源命名空間建置路徑並做能力矩陣測試。
- 用更高 specificity 修復回歸 → 後續覆蓋成本與耦合繼續上升 → 回到根、限制選擇器與層疊層重新建模。
8. 追問及應對
追問一：@scope 能阻止子元件繼承主題變數嗎？
不能。作用域主要限制選擇器匹配；自訂屬性仍按 CSS 繼承規則傳播。若子元件必須獲得獨立變數環境，在其根上覆蓋變數，或使用 Shadow DOM 建立真正邊界。
追問二：多個巢狀作用域都命中同一元素時誰勝出？
仍按 CSS 層疊與作用域相關順序比較，不能只憑「內層一定勝出」作答。把作用域與規則放入已定義的 @layer，用最小可重現案例和瀏覽器 DevTools 檢查實際匹配與優先級。
追問三：不支援 @scope 的瀏覽器如何保持一致？
從同一來源規則生成命名空間選擇器或由 CSS Modules 生成穩定類別，並確保變數、狀態與層級語意相同。執行時能力偵測只選擇實作路徑，不應讓業務元件維護兩套不同狀態邏輯。