Web Components はブラウザの標準 API セットで、再利用可能でカプセル化されたカスタム HTML 要素を構築するためのもの — フレームワークに依存せず、標準ベース。3 つのテクノロジーが組み合わります:
- Custom Elements — 独自のタグを動作と共に定義します。
<template>, <slot>) — 不活性で再利用可能なマークアップ。class UserCard extends HTMLElement {
connectedCallback() { // lifecycle: runs when added to the page
const shadow = this.attachShadow({ mode: "open" }); // create shadow DOM
shadow.innerHTML = `
<style> h2 { color: blue; } </style>
<h2>${this.getAttribute("name")}</h2>
<slot></slot>
`;
}
}
customElements.define("user-card", UserCard); // name MUST contain a hyphen
<user-card name="Ann">Extra content goes in the slot</user-card>
Shadow root 内のスタイルはスコープ化されています — ページの CSS は内部に到達できず、コンポーネントの CSS は外にリークしません。これはグローバル CSS の問題をネイティブに解決します:
/* page CSS */ h2 { color: red; } /* does NOT affect the <h2> inside user-card */
connectedCallback() // added to DOM
disconnectedCallback() // removed from DOM (cleanup)
attributeChangedCallback(name, old, val) // an observed attribute changed
static get observedAttributes() { return ["name"]; }
Web Components により、任意のフレームワーク(またはフレームワークなし)で動作する再利用可能なウィジェットを、真のスタイル/DOM カプセル化と共に構築できます — デザインシステムとマイクロフロントエンドに最適で、異なるスタックを使用するチーム間で共有できます。
これは Shoelace のようなライブラリがフレームワークに依存しないコンポーネントを提供する方法です。
トレードオフ(冗長 API、SSR/スタイリングの複雑さ)により、アプリ開発者は依然として React/Vue を好むことが多いですが、プラットフォームプリミティブは強力で標準ベースです。
ジュニアからシニアまで、詳細な回答付きのIT面接質問ライブラリ。
寄付する