ひとことで言うと
Web Componentsとは、ブラウザの標準API（Custom Elements、Shadow DOM、HTML Templates）を使って再利用可能なUI部品を作る技術の総称だ。ReactやVueのようなフレームワークなしで、`<my-card>`のような独自HTMLタグを定義して使えるようになる。
ChromeやFirefox、SafariなどモダンブラウザはほぼすべてWeb Componentsをサポートしているため、特定のフレームワークのビルドを経由せず、JSファイルをscriptタグで読み込むだけでコンポーネントが動く。この特性がHTMLの直接配信と相性が良い。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
HTML共有で関係する場面
AI生成コードにLit（Google製のWeb Componentsライブラリ）を使ったコンポーネントが含まれる場合、`<script type='module' src='./components.js'>`のようなモジュールimportが使われている。このJSファイルをHTMLと同じフォルダに入れてzipすれば、HTTPSで配信した際にそのまま動作する。
Web ComponentsはCustom Elementsの定義がJSで行われるため、JSファイルが読み込まれる前はカスタムタグが未定義のまま表示される。この「アップグレード前」の表示がちらつきとして見える場合は、CSSで`:not(:defined) { visibility: hidden; }`を指定すると改善できる。
よくある誤解
「Web ComponentsはReactの代替だから複雑」という誤解があるが、シンプルな表示部品であればHTMLファイル内の`<script>`タグだけで定義できる。フレームワーク不要で動くため、共有するHTMLが自己完結しやすいというメリットがある。
「Shadow DOMのスタイルは親ページのCSSが効かないから調整できない」という声もあるが、CSSカスタムプロパティ（変数）はShadow DOMの境界を越えて適用される。共有先でブランドカラーを変えたい場合は`--primary-color: #E74C3C;`のような変数を親CSSで上書きできる。
安全に使うための注意点
Web Componentsのカスタム要素定義がグローバルなCustomElementsRegistryに登録される性質上、同一ページで同名のコンポーネントを2回定義するとエラーになる。AI生成コードを複数組み合わせるとき、コンポーネント名の衝突がないかを事前に確認する。
Web Componentsコンポーネント内でfetchを使って外部APIを呼ぶパターンが多い。共有後にコンポーネントが自動でAPIリクエストを発行しないよう、コンポーネントの初期化ロジックを確認する。特にAI生成コードは認証なしで呼び出せる公開APIへの依存が残りがちだ。
よくある質問
Web ComponentsはIEやレガシーEdgeでも動きますか？
Internet Explorer 11はWeb Componentsをネイティブサポートしていません。Polyfill（@webcomponents/webcomponentsjs）を使えば動作しますが、現在IEのサポートは2022年に終了しており、通常は考慮不要です。社内に古いPCがある場合は確認を。
AI生成コードがLitを使っているかどうか、どうやって確認しますか？
HTMLの`<script>`タグや`package.json`の依存関係に`lit`または`@lit/`が含まれているかを確認します。`import { LitElement } from 'lit'`という記述があればLitを使っています。
Web Componentsで作ったUI部品を別のプロジェクトにコピーして使いまわせますか？
はい、Web ComponentsはフレームワークフリーなのでJSファイルをコピーしてscriptタグで読み込むだけで移植できます。ただし内部でfetchするAPIエンドポイントなどは移植先の環境に合わせて変更が必要です。