Emotion / styled-components は実行時に css-<ランダム> のクラス名を生成し、
対応する <style> を head に注入する。再レンダリングのたびにクラス名が振り直され、
古い <style> は差し替えられる。本ページはこの挙動をバニラ JS で再現し、
Siteforce の CDN/Edge + si.js アーキテクチャで どの補正手法が再レンダリングを越えて残るか を実測する。
再レンダリングごとに css-* が変わり、古い <style> が差し替わる。
button.style.setProperty('color','#000','important') で補正。要素を作り直す再レンダリングで inline style が消える。
@layer siteforce-override の <style> を 1 枚注入し button[data-sf-fixed] で当てる。要素は書き換えず、MutationObserver(childList+subtree のみ観測、attributes は観測しない)で data-sf-fixed を再付与する。
実行中…