【うぇぶこんぽーねんつ】

Web Components とは？

最終更新: 2026年10月4日

💡 フレームワーク不要の「ブラウザ標準コンポーネント」

ブラウザ標準のAPIを使って、再利用できるUI部品を作る技術群。独自のHTML要素を定義するCustom Elements、内部のDOMを分けるShadow DOM、HTML Templatesなどを必要に応じて組み合わせる。

📌 このページのポイント

3技術は必要に応じて使う。Shadow DOMはCSSの適用範囲を分けるが、外側からの影響をすべて断つわけではない。

ひよこ

ペンギン先生

Web Componentsはブラウザの標準APIで独自のHTML要素を定義するよ。Reactを使わずに作った要素をReact側から利用することもできる。ただし属性とプロパティの渡し方やイベントの受け取り方は確認する。どの環境でも設定なしで同じように動くとは限らないね。

ひよこ

Shadow DOMって何？

ペンギン先生

要素の内部に別のDOM ツリーを持たせ、通常のCSSセレクターの適用範囲を分ける仕組みだよ。ただし文字色やフォントなどの継承、CSSカスタムプロパティを通して外側の値が届くことはある。完全に外部の影響を断つ仕組みでも、秘密を守るセキュリティ境界でもないんだ。

ひよこ

テンプレートも必ず使うの？

ペンギン先生

必須ではないよ。HTML Templatesは、画面にすぐ表示しないHTML断片を用意して再利用する仕組み。Custom ElementsやShadow DOMと必要に応じて組み合わせる。部品を作る目的に合わせて使う技術を選べばいいんだ。

ひよこ

Litって何？

ペンギン先生

Web Componentsを作るライブラリだよ。要素の基本クラスやテンプレート、プロパティの変化に応じた更新を用意している。ブラウザ標準の技術で作れることと、ライブラリを使って作業を助けることは両立するね。

まとめ：ざっくりこれだけ覚えればOK！

「Web Components」って出てきたら「ブラウザ標準のカスタムコンポーネント技術」と思えればだいたいOK！

📖 おまけ：英語の意味

「Web Components」＝ Webの部品

💬 Webページで再利用する部品を作るための技術群だよ。3つの主要な技術を組み合わせられるけれど、すべての部品に全部が必須という意味ではないんだ

参考資料