Web コンポーネント

Web コンポーネントとは

Web Components は、ブラウザ標準の技術だけで、再利用可能な独自の HTML 要素を作るための仕組みです。React のコンポーネントに似ていますが、特定のフレームワークに属さず、素の HTML として <user-card> のような独自タグを定義できる点が決定的に違います。

最大の狙いは 2 つです。

• 再利用：一度作った部品を、<my-button> のように HTML に置くだけで何度でも使える。
• カプセル化：部品の内部構造とスタイルを外から隔離し、互いに干渉しないようにする。

ライブラリを一切読み込まなくても、ブラウザが標準でこれを解釈します。だからフレームワークをまたいで使い回せるのが大きな魅力です。

横にスクロール

三本柱

Web Components は単一の機能ではなく、3 つの標準仕様の組み合わせで成り立ちます。

仕様	役割
Custom Elements	<my-card> のような独自タグを定義し、その振る舞いを JavaScript で実装する
Shadow DOM	要素内部の DOM と CSS を外から隔離する（カプセル化の中核）
HTML Template	<template> で描画されない雛形を用意し、繰り返し複製して使う

この 3 つがそろうことで、「独自タグを定義し（Custom Elements）、その中身を外と干渉しない形で持ち（Shadow DOM）、雛形から効率よく作る（template）」という流れが完成します。

Custom Elements：独自タグを作る

Custom Elements は、HTMLElement を継承したクラスを定義し、customElements.define でタグ名と結びつける仕組みです。タグ名には必ずハイフンを含める決まりがあり、これで標準タグと衝突しません。

class UserCard extends HTMLElement {
  // 要素が DOM に追加されたときに呼ばれる
  connectedCallback() {
    const name = this.getAttribute("name") || "名無し";
    this.innerHTML = `<p>ようこそ、${name} さん</p>`;
  }
}

// タグ名（ハイフン必須）と結びつける
customElements.define("user-card", UserCard);

定義すれば、あとは普通の HTML として書けます。

<user-card name="Taro"></user-card>

クラスには、要素のライフサイクルに応じて呼ばれるメソッド（コールバック）があります。これを使い分けます。

コールバック	呼ばれるタイミング
connectedCallback	要素が DOM に追加されたとき
disconnectedCallback	要素が DOM から取り除かれたとき
attributeChangedCallback	監視中の属性が変化したとき

Shadow DOM：スタイルを閉じ込める

Web Components で最も価値が高いのが Shadow DOM です。これは要素の内部に、外の世界から隔離された独立した DOM ツリー（シャドウツリー）を持たせる仕組みです。

何が嬉しいかというと、スタイルのカプセル化です。Shadow DOM の中に書いた CSS は外に漏れず、外側のページの CSS も中には入ってきません。

class FancyBox extends HTMLElement {
  constructor() {
    super();
    // シャドウルートを作る（mode: "open" で外から参照可能）
    const shadow = this.attachShadow({ mode: "open" });
    shadow.innerHTML = `
      <style>
        /* この p は、この部品の中だけに効く。外の p には影響しない */
        p { color: crimson; font-weight: bold; }
      </style>
      <p><slot></slot></p>
    `;
  }
}
customElements.define("fancy-box", FancyBox);

通常の CSS はページ全体がひとつの空間を共有するため、別々のチームが書いた CSS が思わぬ場所で衝突しがちです。Shadow DOM はこの問題を根本から解決します。

コード中の <slot> は、部品の利用者が外から渡した中身を表示する差し込み口です。<fancy-box>こんにちは</fancy-box> と書くと、その「こんにちは」が <slot> の位置に入ります。これにより、枠（部品側）と中身（利用者側）を分けて設計でき、柔軟に使い回せる部品になります。

フレームワーク非依存という強み

Web Components の独自タグは、ブラウザ標準の HTML 要素です。したがって React でも Vue でも Angular でも、素の HTML でも、<user-card> と書けばそのまま動きます。

• フレームワークをまたいで再利用：React のプロジェクトでも Vue のプロジェクトでも、同じ部品を共有できる。
• 長寿命：特定フレームワークの流行り廃りに左右されにくい。標準仕様なのでブラウザがサポートし続ける。
• デザインシステムに好適：会社全体で使うボタンやヘッダを、技術スタックを問わず一元配布できる。

このため、複数チーム・複数フレームワークが混在する大きな組織で、共通 UI 部品の配布手段として採用されることが増えています。

まとめ

• Web Components：ブラウザ標準だけで独自タグを作る仕組み。フレームワークに依存しない。
• 三本柱：Custom Elements（独自タグ）＋ Shadow DOM（カプセル化）＋ template（雛形）。
• Shadow DOM：内部の CSS が外に漏れず・外からも壊されない。スタイル衝突を根本解決する。
• 強み：どのフレームワークでも・素の HTML でも使える。共通 UI 部品の配布に向く。

土台となる HTML のタグの仕組み、操作対象の DOM、隔離するスタイルの CSS を押さえると、Web Components の挙動がより明確になります。