Emotion / styled-components は実行時に css-<ランダム> のクラス名を生成し、
対応する <style> を head に注入する。再レンダリングのたびにクラス名が振り直され、
古い <style> は差し替えられる。本ページはこの挙動をバニラ JS で再現し、
Siteforce の CDN/Edge + si.js アーキテクチャで どの補正手法が再レンダリングを越えて残るか を実測する。
再レンダリングごとに css-* が変わり、古い <style> が差し替わる。
button.style.setProperty('color','#000','important') で補正。要素を作り直す再レンダリングで inline style が消える。
これは技術 PoC であり、現行 si.js が出荷している補正ではない。@layer siteforce-override の <style> を 1 枚注入し button[data-sf-fixed] で当てる。要素は書き換えず、MutationObserver（childList+subtree のみ観測、attributes は観測しない）で data-sf-fixed を再付与する。本番はこの視覚（コントラスト）補正型を未配線（既存の shadow-css.ts は CSS変数/::part 方式）で、`@layer` 化は既存補正を弱める回帰になるため新規の補正型が必要。詳細: docs/todos/dom-overlay-enhancements.md 課題1。
実行中…