Webフロントエンド - 基礎

Web Components うぇぶこんぽーねんつ

カスタム要素Shadow DOMHTMLテンプレート再利用可能コンポーネントWeb標準フレームワーク非依存

Web Componentsについて教えて

簡単に言うとこんな感じ！

「自分だけのHTMLタグ」を作れる仕組みだよ！たとえば <my-button> とか <user-card> みたいなタグを自作して、どのWebサイトでも使い回せるんだ。ReactやVueに頼らなくてもブラウザだけで動くのが最大の特徴ってこと！

Web Componentsとは

Web Componentsとは、再利用可能なカスタムHTML要素をブラウザの標準機能だけで作成・利用できる技術仕様の総称です。特定のJavaScriptフレームワーク（ReactやVueなど）に依存せず、ブラウザに組み込まれた機能として動作するため、「どんな環境でも使える部品」を作れることが最大の特徴です。

Webサイトを作る際、ヘッダーやボタン、カードといったUI部品を何度も書き直す手間を省くために「コンポーネント化（部品化）」という考え方が広まっています。Web Componentsは、その部品化をWebの標準仕様として実現したものです。一度作った部品を、ReactでもVueでも素のHTMLでも、どこでも使い回せるという「真の再利用性」を目指しています。

ビジネス的な観点では、デザインシステムや社内UIライブラリを構築する際に特に威力を発揮します。技術スタックが異なる複数のシステムでも共通の見た目・動作を持つ部品を配布できるため、大企業やエンタープライズ系のWebシステムで採用が進んでいます。

Web Componentsを構成する3つの技術仕様

Web Componentsは、以下の3つのWebブラウザ標準仕様が組み合わさって成り立っています。

仕様名	役割	一言説明
Custom Elements	新しいHTMLタグを定義する	`<my-button>` のような独自タグを作る
Shadow DOM	部品のスタイル・構造を外部から隔離する	「カプセル」の中にCSSとHTMLを閉じ込める
HTML Templates	描画前のHTMLの雛形を定義する	`<template>` タグで使い回せる骨格を作る

3つの仕様の覚え方

「カシャド」と覚えよう！

カスタム要素（Custom Elements）
シャドウDOM（Shadow DOM）
ド（テンプレート → TemplateのD）

Shadow DOMの「隔離」が重要な理由

Shadow DOMは、コンポーネント内部のCSSやHTML構造を外のページから見えない・干渉されない状態にする仕組みです。

通常のDOM（Shadow DOMなし）
├── <body>
│   ├── <h1>（ページのスタイルが全部当たる）
│   └── <div class="card">（外のCSSが混入するリスクあり）

Shadow DOMあり
├── <body>
│   ├── <h1>
│   └── <my-card> ← カスタム要素
│       └── #shadow-root（外部から隔離された空間）
│           ├── <style>（ここのCSSは外に漏れない）
│           └── <div class="card">（外のCSSも入ってこない）

これにより、「他のCSSと衝突してデザインが崩れる」という悩みを根本から解決できます。

歴史と背景

2011年 — GoogleエンジニアのAlex Russell氏がWeb Componentsのコンセプトを提唱。「フレームワークに頼らないコンポーネント化」を訴える
2013年 — GoogleがPolymerライブラリを発表。Web Componentsのポリフィル（古いブラウザ向け互換実装）として普及を後押し
2016年 — Chrome・Safariが主要仕様をネイティブサポート開始。Firefoxも段階的に対応
2018年 — Custom Elements v1・Shadow DOM v1 がすべての主要ブラウザで利用可能に。IEを除き「使える技術」へ
2019年〜 — Mozilla、Apple、Microsoftも仕様策定に参加。W3CおよびWHATWGで標準化が加速
2020年 — MicrosoftがIEのサポート縮小を発表。「IE問題」の解消見通しが立ちWeb Components採用が加速
2022年〜現在 — Adobe、SAP、SalesforceなどエンタープライズIT企業が公式UIライブラリをWeb Components化。GoogleもChrome組み込みUIにWeb Componentsを活用

フレームワークとの比較・位置づけ

Web Componentsは「ReactやVueの代替」ではなく「それらと共存できる基盤技術」です。

比較項目	Web Components	React / Vue
動作環境	ブラウザのみ（ライブラリ不要）	フレームワークのランタイムが必要
再利用範囲	技術スタック横断で使える	同フレームワーク内が基本
学習コスト	低〜中（素のJS知識で足りる）	中〜高（フレームワーク固有の知識が必要）
状態管理	自前で実装が必要	フレームワークが強力な仕組みを提供
エコシステム	標準仕様のみ（ライブラリ少）	豊富なライブラリ・ツール群
向いている用途	UIライブラリ・デザインシステム	アプリ全体の構築

実際のコード例：カスタム要素の定義

<!-- HTMLで使う側 -->
<user-card name="山田 太郎" role="エンジニア"></user-card>

<script>
// カスタム要素を定義する
class UserCard extends HTMLElement {
  connectedCallback() {
    // Shadow DOMを作成（外部から隔離）
    const shadow = this.attachShadow({ mode: 'open' });
    const name = this.getAttribute('name');
    const role = this.getAttribute('role');

    shadow.innerHTML = `
      <style>
        /* このCSSはコンポーネント内にしか効かない */
        .card { padding: 16px; border: 1px solid #e2e8f0; border-radius: 8px; }
        .name { font-weight: bold; font-size: 1.1em; }
        .role { color: #64748b; font-size: 0.9em; }
      </style>
      <div class="card">
        <div class="name">${name}</div>
        <div class="role">${role}</div>
      </div>
    `;
  }
}

// ブラウザに「user-card」タグを登録
customElements.define('user-card', UserCard);
</script>

規格・仕様	内容
WHATWG HTML Living Standard	Custom Elements の公式仕様。`customElements.define()` などのAPIを定義
W3C Shadow DOM Specification	Shadow DOMの仕様（現在はHTML Living Standardに統合）
W3C HTML Templates	`<template>` 要素の仕様