DOM オーバーレイ型 vs Edge補正型 — 5課題 検証フィクスチャ
出典: docs/research/competitor-limitation-coverage.md §7
各課題ページは「未補正 / Edge補正済み / 補正失敗」の3状態を並べて表示する。
| # | 課題 | Edge補正結果 | 理由 |
|---|---|---|---|
| 1 | CSS-in-JS（Emotion / styled-components） | 初期HTML補正: ✅ / 再レンダリング後: ⚠️ 補正失敗 | Emotion がランダムクラス名を再生成するため、Edge の !important ルールがヒットしなくなる |
| 2 | Closed Shadow DOM | 🚫 構造的制約（補正不可） | mode:"closed" の shadowRoot は Web標準により外部 JS / Edge から取得不可（null を返す） |
| 3 | SPA 再レンダリング | 初期HTML補正: ✅ / React差分更新後: ⚠️ 補正失敗 | React の vDOM diff が Edge 補正済み属性を上書き・削除する |
| 4 | ページリロード時の未補正フラッシュ | ✅ Edge補正済み（Siteforce の構造的優位） | Edge が HTML 応答自体に補正を含めるため、DOMオーバーレイ型のような JS 遅延フラッシュが発生しない |
| 5 | CSP / cross-origin iframe / Hydration | CSP: ✅ / cross-origin iframe: 🚫 / Hydration: ✅ | CSPは追加スクリプト不要なので回避。iframe はsame-origin制約で構造的に不可。Hydrationは補正済みHTMLが正解になるため安全 |