SPAにしないReact移行：Shadow DOMでCSS地獄を隔離する実装パターン by murasuke

10年以上の運用で15,000行に膨れ上がった「CSS地獄」。
"!important" が飛び交うレガシー環境で、既存システムの開発を止めることなく「Vite + React + Tailwind」の開発体験を手に入れる
そのような都合の良い方法は存在するのでしょうか？

本セッションでは、フルリプレースや完全SPA化ではなく「画面のコンテンツ領域にReactを後付けする」という移行事例を紹介します。
最大の壁となるレガシーCSSの干渉を防ぐために、「iframe」ではなく「Shadow DOM」を採用しました。
Reactを「Shadow DOM」でラップする実装パターンを中心に、この手法に至った経緯や、実運用で遭遇した落とし穴とその対策についても共有します。

「レガシー環境を捨てられないが、開発体験は諦めたくない」 というエンジニアの方へ、新旧UI共存の現実解をお届けします。