Shadow DOM（Web Componentsとの関係）

1. Shadow DOMとは

Shadow DOMは、Web Componentsを構成する重要な技術の一つで、DOMツリーの一部をカプセル化して外部から独立した領域を作る仕組みです。通常のDOMでは、スタイルやスクリプトがグローバルに適用されてしまいますが、Shadow DOMを使うと、その内部にある要素やスタイルは外部から干渉されず、逆に外部のスタイルも影響を与えません。
これにより、再利用可能で予測可能なUIコンポーネントを構築できます。

2. Shadow DOMの基本的な仕組み

  • Shadow Root
    特定の要素に対してattachShadow()メソッドを使うことで、Shadow DOMを生成できます。このとき生成されるルートを「Shadow Root」と呼びます。

  • シャドウツリー
    Shadow Rootの下には独自のDOMツリー（シャドウツリー）が構築され、通常のDOMからは独立した階層になります。

  • カプセル化
    シャドウツリー内のスタイルやスクリプトは、外部と干渉しないように隔離されます。

3. Shadow DOMとWeb Components

Web Componentsは以下の技術で構成されています。

  1. Custom Elements（独自タグの定義）

  2. Shadow DOM（DOMとスタイルのカプセル化）

  3. HTML Templates（構造の定義と再利用）

この中でShadow DOMは、カスタム要素の内部実装を隠蔽する役割を担います。
例えば、<my-button>というカスタム要素を作成した場合、その内部でボタンやスタイルをShadow DOMに定義すれば、外部のページから余計なスタイルが適用される心配がありません。

4. Shadow DOMのモード

Shadow DOMには2つのモードがあります。

  • openモード: 外部からelement.shadowRootを通じてアクセス可能。

  • closedモード: 外部からはアクセスできず、完全に隠蔽される。

5. サンプルコード

以下はカスタム要素とShadow DOMを使った例です。

javascript
class MyButton extends HTMLElement {
  constructor() {
    super();
    // Shadow DOMをopenモードで作成
    const shadow = this.attachShadow({ mode: 'open' });

    // 要素を作成
    const button = document.createElement('button');
    button.textContent = 'Click Me';

    // スタイルを追加
    const style = document.createElement('style');
    style.textContent = `
      button {
        background-color: blue;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
      }
    `;

    // シャドウツリーに要素を追加
    shadow.appendChild(style);
    shadow.appendChild(button);
  }
}

// カスタム要素を定義
customElements.define('my-button', MyButton);

HTMLに以下を追加すると、独立したスタイル付きボタンが表示されます。

html
<my-button></my-button>

6. 利点

  • スタイルのカプセル化により外部影響を防ぐ

  • 再利用性の高いUIコンポーネントを構築可能

  • Webアプリケーションの保守性向上

ChatGPT5 生成日：2025/09/11