課題 1: CSS-in-JS（Emotion / styled-components）
Emotion はレンダリングごとにランダムハッシュのクラス名を生成し <style> を注入する。 Edge が初期 HTML を補正しても、次の React レンダリングで新クラス名が生成され補正ルールがヒットしなくなる。
🔴 未補正Edge 補正なし（ベースライン）
/* Emotion が生成 */
.css-xxxxx {
color: #cccccc; /* コントラスト比 1.6:1 — WCAG AA 失敗 */
background: #ffffff;
}
色: #cccccc / 背景: #ffffff → コントラスト比 1.6:1（WCAG AA 基準 4.5:1 に未達）
✅ Edge補正済み初期 HTML 段階では有効
/* Edge が注入した補正ルール */
.css-xxxxx {
color: #000000 !important; /* コントラスト比 21:1 — AA 合格 */
}
Edge は SSR HTML から静的クラス名を検出し、!important 補正スタイルを HTML 応答に埋め込む。 初回レンダリング時点ではコントラスト違反が解消されている。
⚠️ 補正失敗再レンダリング後（0 回更新済み）
/* Emotion が再生成したクラス（3秒ごとに変わる）*/
.css-xxxxx {
color: #cccccc; /* Edge の補正ルールはこのクラスを知らない */
}
/* Edge が注入した補正ルールは古いクラス名を対象としており
新しいクラス名にはヒットしない → 低コントラストに戻る */
3秒ごとに Emotion がクラス名を再生成する。Edge の補正ルール（初回クラス用）は 新しいクラス名に一致しないため、低コントラストの状態に戻る。
結論: Edge は初期 HTML の静的クラス名に対して補正を注入できる（✅）。 ただし Emotion / styled-components は React の再レンダリングのたびに新クラス名を生成するため、 補正ルールが無効化される（⚠️）。CSS-in-JS を使うサイトへの対応は「ベストエフォート」扱いとなる。 Siteforce も競合 DOMオーバーレイ製品も同条件。