Web Components SSR Experiment

Declarative Shadow DOM を使ったSSR実験

1. Counter Component (状態付き)

SSRされた初期値をhydrationで復元し、イベントを接続

2. Card Component (Slot使用)

Light DOMのコンテンツをSlotで投影

SSRされたカード

このコンテンツはLight DOMにあり、Slotで投影されています。

SEOに有利で、JSなしでもコンテンツが表示されます。

3. Toggle Component (boolean状態)

ON/OFF状態をSSRで保持

4. List Component (配列データ)

配列データをSSRでレンダリング

Hydration状態

Hydration前: JavaScriptが読み込まれていません