課題1: CSS-in-JS の動的クラス上書き

Emotion / styled-components は実行時に css-<ランダム> のクラス名を生成し、 対応する <style>head に注入する。再レンダリングのたびにクラス名が振り直され、 古い <style> は差し替えられる。本ページはこの挙動をバニラ JS で再現し、 Siteforce の CDN/Edge + si.js アーキテクチャで どの補正手法が再レンダリングを越えて残るか を実測する。

A. 未補正(低コントラスト)

🔴 補正なし

現在のクラス: - / 再レンダリング回数: 0

再レンダリングごとに css-* が変わり、古い <style> が差し替わる。

検査中…

B. インライン style 補正(消える)

⚠️ 要素書き換え型

現在のクラス: - / 再レンダリング回数: 0

button.style.setProperty('color','#000','important') で補正。要素を作り直す再レンダリングで inline style が消える。

検査中…

C. cascade layer 補正(残る)

🟢 stylesheet 追加型

現在のクラス: - / 再レンダリング回数: 0

@layer siteforce-override<style> を 1 枚注入し button[data-sf-fixed] で当てる。要素は書き換えず、MutationObserver(childList+subtree のみ観測、attributes は観測しない)で data-sf-fixed を再付与する。

検査中…

結論(このページの実測が示すこと)

実行中…