Nested Web Components SSR

1. 入れ子コンポーネント (3階層)

app-root → app-sidebar + app-main → app-card

2. CSS読み込み状況

確認中...

3. Hydration順序

構造図

<app-root>                           ← Level 0
  <template shadowrootmode="open">
    <link rel="stylesheet" href="shared.css">  ← 共有CSS
    <app-sidebar>                    ← Level 1
      <template shadowrootmode="open">
        <link rel="stylesheet" href="shared.css">
        ...
      </template>
    </app-sidebar>
    <app-main>                       ← Level 1
      <template shadowrootmode="open">
        <link rel="stylesheet" href="shared.css">
        <app-card>                   ← Level 2
          <template shadowrootmode="open">
            <link rel="stylesheet" href="shared.css">
          </template>
        </app-card>
      </template>
    </app-main>
  </template>
</app-root>

CSS読み込み:
  shared.css は5回 <link> されるが、
  ブラウザは1回だけHTTPリクエストを送信（キャッシュ）