Web Components Shadow DOM を使いこなす - スタイルカプセル化と Slot 活用テクニック

2025年9月15日

Web Components

Web Components Shadow DOM を使いこなす - スタイルカプセル化と Slot 活用テクニック

Web Components 開発において、スタイルの競合やコンポーネント間の分離に悩まされることはありませんか。Shadow DOM と Slot を適切に活用すれば、これらの課題を解決し、保守性の高い Web アプリケーションを構築できます。

本記事では、Shadow DOM の基本概念から実践的な活用テクニックまで、段階的に解説いたします。スタイルカプセル化の仕組みや Slot による柔軟なコンテンツ配置の方法を習得し、モダンな Web 開発スキルを身につけましょう。

背景

Shadow DOM とは何か

Shadow DOM は、Web Components API の一部として提供される仕組みで、DOM 要素に独立した DOM ツリーを作成する技術です。この Shadow DOM は、メインの DOM（Light DOM）から分離された空間を提供し、カプセル化されたコンポーネントの構築を可能にします。

mermaidflowchart TD
    document[Document]
    lightDOM[Light DOM]
    shadowHost[Shadow Host]
    shadowRoot[Shadow Root]
    shadowDOM[Shadow DOM]

    document --> lightDOM
    lightDOM --> shadowHost
    shadowHost --> shadowRoot
    shadowRoot --> shadowDOM

    style shadowDOM fill:#e1f5fe
    style shadowRoot fill:#f3e5f5

上図のように、Shadow DOM は通常の DOM 構造とは独立して存在します。Shadow Host と呼ばれる要素が Shadow Root を持ち、その配下に Shadow DOM が構築されます。

従来の DOM 操作との違い

従来の DOM 操作では、すべての要素がグローバルスコープに存在するため、CSS セレクタや JavaScript からのアクセスが容易でした。しかし、この仕組みには以下の問題があります。

従来の DOM 操作の特徴

すべての要素がグローバルスコープに存在
CSS スタイルが意図しない要素に影響
名前衝突のリスクが高い

Shadow DOM の特徴

カプセル化されたスコープ
外部からの直接アクセス制限
スタイルの分離と保護

javascript// 従来のDOM操作
const element = document.createElement('div');
element.innerHTML = '<p>従来の方法</p>';
document.body.appendChild(element);

// Shadow DOMを使用した操作
const shadowHost = document.createElement('div');
const shadowRoot = shadowHost.attachShadow({
  mode: 'open',
});
shadowRoot.innerHTML = '<p>Shadow DOM内のコンテンツ</p>';
document.body.appendChild(shadowHost);

なぜ Shadow DOM が必要なのか

現代の Web アプリケーション開発では、コンポーネント指向の設計が主流となっています。しかし、従来の技術では以下の課題が顕在化していました。

mermaidflowchart LR
    problems[従来の問題点]
    styleConflict[スタイル競合]
    globalScope[グローバルスコープ汚染]
    maintenance[保守性の低下]

    problems --> styleConflict
    problems --> globalScope
    problems --> maintenance

    styleConflict --> solution[Shadow DOM]
    globalScope --> solution
    maintenance --> solution

    solution --> benefits[カプセル化による解決]

Shadow DOM は、これらの問題を根本的に解決し、以下のメリットを提供します。

真のカプセル化: スタイルとロジックの完全な分離
再利用性: 独立したコンポーネントとして機能
保守性: 影響範囲が明確で変更が容易

課題

スタイルの競合問題

大規模な Web アプリケーションでは、複数の開発者が異なるコンポーネントを開発するため、CSS クラス名の重複やスタイル定義の衝突が頻繁に発生します。

css/* 開発者Aが作成したスタイル */
.button {
  background-color: blue;
  padding: 10px;
}

/* 開発者Bが作成したスタイル */
.button {
  background-color: red;
  border-radius: 5px;
}

この場合、後から読み込まれたスタイルが優先され、意図しないデザインになってしまいます。

グローバル CSS の影響範囲

グローバルに定義された CSS は、アプリケーション全体に影響を与えるため、以下の問題が生じます。

問題	詳細	影響度
1	意図しない要素への適用	高
2	デバッグの困難さ	中
3	スタイルの上書き競合	高
4	保守性の低下	高

コンポーネント間の分離の困難さ

従来の手法では、真の意味でのコンポーネント分離が困難でした。以下のコードは、この問題を表しています。

html<!DOCTYPE html>
<html>
  <head>
    <style>
      .card {
        border: 1px solid #ccc;
      }
      .title {
        color: blue;
      }
    </style>
  </head>
  <body>
    <!-- コンポーネントA -->
    <div class="card">
      <h2 class="title">カードタイトル</h2>
    </div>

    <!-- コンポーネントB -->
    <div class="card">
      <h2 class="title">別のタイトル</h2>
    </div>
  </body>
</html>

上記の例では、両方のコンポーネントが同じ CSS クラスを共有しており、独立性が保たれていません。

解決策

Shadow DOM によるスタイルカプセル化

Shadow DOM を使用することで、各コンポーネントが独自のスタイルスコープを持つことができます。これにより、スタイルの競合を根本的に解決できます。

javascriptclass CustomCard extends HTMLElement {
  constructor() {
    super();

    // Shadow DOMを作成
    this.attachShadow({ mode: 'open' });

    // スタイルを定義（このコンポーネント内でのみ有効）
    this.shadowRoot.innerHTML = `
            <style>
                .card {
                    border: 2px solid #007bff;
                    border-radius: 8px;
                    padding: 16px;
                    background-color: #f8f9fa;
                }
                .title {
                    color: #007bff;
                    margin: 0 0 12px 0;
                    font-size: 1.25rem;
                }
            </style>
            <div class="card">
                <h2 class="title"><slot name="title">デフォルトタイトル</slot></h2>
                <div class="content">
                    <slot>デフォルトコンテンツ</slot>
                </div>
            </div>
        `;
  }
}

customElements.define('custom-card', CustomCard);

Slot を使った柔軟なコンテンツ配置

Slot は、Shadow DOM 内で外部からのコンテンツを受け入れるためのメカニズムです。これにより、コンポーネントの構造を保ちながら、動的なコンテンツの挿入が可能になります。

mermaidflowchart TB
    lightDOM[Light DOM]
    slot1[Named Slot: title]
    slot2[Default Slot]
    shadowDOM[Shadow DOM]

    lightDOM -->|コンテンツ投影| slot1
    lightDOM -->|コンテンツ投影| slot2
    slot1 --> shadowDOM
    slot2 --> shadowDOM

    style slot1 fill:#ffecb3
    style slot2 fill:#ffecb3

Slot には以下の種類があります。

デフォルト Slot（無名 Slot）

html<slot>フォールバックコンテンツ</slot>

名前付き Slot（Named Slot）

html<slot name="header">デフォルトヘッダー</slot>
<slot name="footer">デフォルトフッター</slot>

ライフサイクル管理

Web Components は、標準的なライフサイクルメソッドを提供しており、適切な管理が可能です。

javascriptclass LifecycleComponent extends HTMLElement {
  constructor() {
    super();
    console.log('コンストラクタ実行');
    this.attachShadow({ mode: 'open' });
  }

  // DOM に接続された時
  connectedCallback() {
    console.log('DOM に接続されました');
    this.render();
  }

  // DOM から切断された時
  disconnectedCallback() {
    console.log('DOM から切断されました');
    this.cleanup();
  }

  // 属性が変更された時
  attributeChangedCallback(name, oldValue, newValue) {
    console.log(
      `属性 ${name} が ${oldValue} から ${newValue} に変更`
    );
    this.render();
  }

  // 監視する属性を指定
  static get observedAttributes() {
    return ['title', 'color'];
  }

  render() {
    this.shadowRoot.innerHTML = `
            <style>
                .container { color: ${
                  this.getAttribute('color') || 'black'
                }; }
            </style>
            <div class="container">
                <h1>${
                  this.getAttribute('title') || 'タイトル'
                }</h1>
            </div>
        `;
  }

  cleanup() {
    // クリーンアップ処理
  }
}

具体例

基本的な Shadow DOM 作成

最初に、最もシンプルな Shadow DOM の作成方法を見てみましょう。

javascript// Shadow Host となる要素を作成
const hostElement = document.createElement('div');

// Shadow Root を作成
const shadowRoot = hostElement.attachShadow({
  mode: 'open',
});

// Shadow DOM 内にコンテンツを追加
shadowRoot.innerHTML = `
    <style>
        p { 
            color: red; 
            font-weight: bold; 
        }
    </style>
    <p>これはShadow DOM内のコンテンツです</p>
`;

// ドキュメントに追加
document.body.appendChild(hostElement);

Shadow DOM の作成時に指定できるオプションは以下の通りです。

オプション	説明	推奨用途
mode: 'open'	JavaScript からアクセス可能	一般的な開発
mode: 'closed'	JavaScript からアクセス不可	セキュリティが重要な場合

CSS スタイルのカプセル化実装

Shadow DOM 内のスタイルは、外部に影響を与えず、また外部からの影響も受けません。以下の例で、この動作を確認できます。

html<!DOCTYPE html>
<html>
  <head>
    <style>
      /* グローバルスタイル */
      .message {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <!-- 通常の要素（グローバルスタイルが適用される） -->
    <div class="message">
      グローバルスタイルが適用されます
    </div>

    <!-- Shadow DOM を使用する要素 -->
    <div id="shadow-host"></div>

    <script>
      const host = document.getElementById('shadow-host');
      const shadowRoot = host.attachShadow({
        mode: 'open',
      });

      shadowRoot.innerHTML = `
            <style>
                .message {
                    color: red;
                    background-color: lightgreen;
                    padding: 10px;
                    border: 2px solid darkgreen;
                }
            </style>
            <div class="message">Shadow DOM内の独立したスタイル</div>
        `;
    </script>
  </body>
</html>

上記のコードでは、同じクラス名「message」を使用していますが、Shadow DOM 内の要素は独自のスタイルが適用されます。

Named Slot の活用

Named Slot を使用することで、より柔軟なコンポーネント設計が可能になります。

javascriptclass FlexibleCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });

    this.shadowRoot.innerHTML = `
            <style>
                .card {
                    border: 1px solid #ddd;
                    border-radius: 8px;
                    overflow: hidden;
                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                }
                .header {
                    background-color: #f5f5f5;
                    padding: 16px;
                    border-bottom: 1px solid #ddd;
                }
                .body {
                    padding: 16px;
                }
                .footer {
                    background-color: #f9f9f9;
                    padding: 12px 16px;
                    border-top: 1px solid #ddd;
                    text-align: right;
                }
            </style>
            <div class="card">
                <div class="header">
                    <slot name="header">デフォルトヘッダー</slot>
                </div>
                <div class="body">
                    <slot>デフォルトコンテンツ</slot>
                </div>
                <div class="footer">
                    <slot name="footer">
                        <button>OK</button>
                    </slot>
                </div>
            </div>
        `;
  }
}

customElements.define('flexible-card', FlexibleCard);

このコンポーネントを使用する際は、以下のようにコンテンツを指定します。

html<flexible-card>
  <h2 slot="header">カスタムヘッダー</h2>
  <p>ここにメインコンテンツを記述します。</p>
  <p>複数の段落も可能です。</p>
  <div slot="footer">
    <button>キャンセル</button>
    <button>保存</button>
  </div>
</flexible-card>

Slotted 要素のスタイリング

Shadow DOM 内から、Slot で投影された要素（Slotted 要素）にスタイルを適用する方法を学びましょう。

javascriptclass StyledSlotComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });

    this.shadowRoot.innerHTML = `
            <style>
                /* Slotted要素全体にスタイルを適用 */
                ::slotted(*) {
                    margin: 8px 0;
                    transition: all 0.3s ease;
                }
                
                /* 特定のタグにスタイルを適用 */
                ::slotted(h1) {
                    color: #2c3e50;
                    border-bottom: 2px solid #3498db;
                    padding-bottom: 8px;
                }
                
                /* 特定のクラスにスタイルを適用 */
                ::slotted(.highlight) {
                    background-color: #fff3cd;
                    padding: 8px;
                    border-left: 4px solid #ffc107;
                }
                
                /* 名前付きSlotの要素にスタイルを適用 */
                ::slotted([slot="special"]) {
                    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
                    color: white;
                    padding: 12px;
                    border-radius: 6px;
                }
                
                .container {
                    padding: 20px;
                    border: 1px solid #e0e0e0;
                    border-radius: 8px;
                }
            </style>
            <div class="container">
                <slot name="special"></slot>
                <slot></slot>
            </div>
        `;
  }
}

customElements.define('styled-slot', StyledSlotComponent);

使用例：

html<styled-slot>
  <h1>メインタイトル</h1>
  <p class="highlight">ハイライトされるテキスト</p>
  <p>通常のテキスト</p>
  <div slot="special">特別なスロット内容</div>
</styled-slot>

実践的なカスタム要素作成

最後に、実際のプロジェクトで使用できる本格的なカスタム要素を作成してみましょう。

javascriptclass InteractiveModal extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.isOpen = false;
    this.render();
    this.setupEventListeners();
  }

  static get observedAttributes() {
    return ['open', 'size', 'title'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'open') {
      this.isOpen = newValue !== null;
      this.updateVisibility();
    } else {
      this.render();
    }
  }

  render() {
    const size = this.getAttribute('size') || 'medium';
    const title = this.getAttribute('title') || 'モーダル';

    this.shadowRoot.innerHTML = `
            <style>
                .overlay {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, 0.5);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    z-index: 1000;
                    opacity: 0;
                    visibility: hidden;
                    transition: all 0.3s ease;
                }
                
                .overlay.show {
                    opacity: 1;
                    visibility: visible;
                }
                
                .modal {
                    background: white;
                    border-radius: 8px;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
                    transform: translateY(-20px);
                    transition: transform 0.3s ease;
                    max-height: 90vh;
                    overflow-y: auto;
                }
                
                .overlay.show .modal {
                    transform: translateY(0);
                }
                
                .modal.small { width: 300px; }
                .modal.medium { width: 500px; }
                .modal.large { width: 800px; }
                
                .modal-header {
                    padding: 20px;
                    border-bottom: 1px solid #e0e0e0;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                
                .modal-title {
                    margin: 0;
                    font-size: 1.25rem;
                    color: #333;
                }
                
                .close-button {
                    background: none;
                    border: none;
                    font-size: 24px;
                    cursor: pointer;
                    color: #666;
                    padding: 0;
                    width: 30px;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                
                .close-button:hover {
                    color: #333;
                }
                
                .modal-body {
                    padding: 20px;
                }
                
                .modal-footer {
                    padding: 20px;
                    border-top: 1px solid #e0e0e0;
                    text-align: right;
                }
                
                ::slotted(.btn) {
                    margin-left: 8px;
                }
            </style>
            <div class="overlay" id="overlay">
                <div class="modal ${size}">
                    <div class="modal-header">
                        <h2 class="modal-title">${title}</h2>
                        <button class="close-button" id="closeBtn">&times;</button>
                    </div>
                    <div class="modal-body">
                        <slot>モーダルの内容がここに表示されます</slot>
                    </div>
                    <div class="modal-footer">
                        <slot name="footer">
                            <button class="btn">閉じる</button>
                        </slot>
                    </div>
                </div>
            </div>
        `;
  }

  setupEventListeners() {
    const overlay =
      this.shadowRoot.getElementById('overlay');
    const closeBtn =
      this.shadowRoot.getElementById('closeBtn');

    // 閉じるボタンのクリック
    closeBtn.addEventListener('click', () => this.close());

    // オーバーレイクリックで閉じる
    overlay.addEventListener('click', (e) => {
      if (e.target === overlay) {
        this.close();
      }
    });

    // ESCキーで閉じる
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && this.isOpen) {
        this.close();
      }
    });
  }

  open() {
    this.setAttribute('open', '');
    this.dispatchEvent(new CustomEvent('modal-open'));
  }

  close() {
    this.removeAttribute('open');
    this.dispatchEvent(new CustomEvent('modal-close'));
  }

  updateVisibility() {
    const overlay =
      this.shadowRoot.getElementById('overlay');
    overlay.classList.toggle('show', this.isOpen);
  }
}

customElements.define(
  'interactive-modal',
  InteractiveModal
);

使用例：

html<interactive-modal
  id="myModal"
  title="確認ダイアログ"
  size="small"
>
  <p>この操作を実行してもよろしいですか？</p>
  <div slot="footer">
    <button
      class="btn btn-secondary"
      onclick="document.getElementById('myModal').close()"
    >
      キャンセル
    </button>
    <button
      class="btn btn-primary"
      onclick="executeAction()"
    >
      実行
    </button>
  </div>
</interactive-modal>

<button onclick="document.getElementById('myModal').open()">
  モーダルを開く
</button>

まとめ

Shadow DOM と Slot の活用ポイント

Shadow DOM と Slot を効果的に活用するための重要なポイントをまとめました。

mermaidflowchart TD
    start[Shadow DOM & Slot活用]

    design[設計フェーズ]
    implement[実装フェーズ]
    maintain[保守フェーズ]

    start --> design
    start --> implement
    start --> maintain

    design --> designPoints[・コンポーネント境界の明確化<br/>・Slotの命名規則策定<br/>・スタイルガイド作成]
    implement --> implementPoints[・適切なカプセル化<br/>・パフォーマンス考慮<br/>・アクセシビリティ対応]
    maintain --> maintainPoints[・テストカバレッジ<br/>・ドキュメント整備<br/>・バージョン管理]

設計時の考慮点

コンポーネントの責任範囲を明確にする
再利用性を意識した Slot 設計
一貫性のある命名規則の策定

実装時のベストプラクティス

適切なライフサイクル管理
エラーハンドリングの実装
パフォーマンス最適化

保守における重要な点

十分なテストの作成
明確なドキュメントの整備
バージョン管理とマイグレーション計画

開発効率向上のメリット

Shadow DOM と Slot を活用することで、以下のような開発効率の向上が期待できます。

メリット	詳細	効果
スタイル分離	CSS の競合問題を解決	デバッグ時間の短縮
コンポーネント独立性	他の部分への影響を排除	安全な変更作業
再利用性向上	異なるプロジェクトでの活用	開発速度の向上
保守性向上	影響範囲の限定	長期メンテナンスコスト削減