CSS共有パターン比較

3つのCSS共有方式

1. <link rel="stylesheet"> (nested.html)
   - 各Shadow DOM内に <link> を配置
   - ブラウザがHTTPキャッシュで重複リクエストを防ぐ
   - CSSの解析は各Shadow DOM で個別に行われる

2. Adoptable Stylesheets (このページ)
   - CSSStyleSheet オブジェクトを JS で作成
   - 複数の Shadow DOM で同一オブジェクトを共有
   - 解析コストが1回で済む（メモリ効率◎）

3. CSS Custom Properties (継承)
   - :host で CSS 変数を定義
   - 子コンポーネントで var(--xxx) で参照
   - 構造的なスタイルは共有できない
    

Adoptable Stylesheets デモ

同一の CSSStyleSheet オブジェクトを5つのコンポーネントで共有

メモリ使用状況

計測中...

実装コード

// 共有スタイルシート（1回だけ作成）
const sharedStyles = new CSSStyleSheet();
sharedStyles.replaceSync(`
  .card { ... }
  .btn { ... }
`);

class MyComponent extends HTMLElement {
  connectedCallback() {
    // 既存の shadowRoot（SSR）または新規作成
    if (!this.shadowRoot) {
      this.attachShadow({ mode: 'open' });
    }

    // 共有スタイルシートを採用
    this.shadowRoot.adoptedStyleSheets = [sharedStyles];
  }
}