defineCustomElement() カスタム要素の定義
最終更新：2026-10-22
defineCustomElement() カスタム要素の定義
defineCustomElement() は Vue コンポーネントを標準の Web Component にラップします。任意のフレームワークやネイティブページで
| グループ | レンダー関数と SSR |
|---|---|
| 種類 | API |
| スコープ | グローバル |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
const MyEl = defineCustomElement({ props: { msg: String }, template: "<p>{{ msg }}</p>" })
customElements.define("my-element", MyEl)⚙️ 引数
| options | コンポーネント定義（styles 配列でスタイルを注入できます） |
|---|
戻り値：カスタム要素クラス（customElements.define で登録します）
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Renders 'from a custom element'.💡 ポイント
ℹ️ 補足 技術スタックをまたいでコンポーネントを再利用する場合に有用です。デザインシステムが Vue/React/ネイティブページのすべてに対応できます。
💡 ヒント styles オプションは shadow DOM にスタイルを注入します。カプセル化が強くなります。
⚠️ 注意 カスタム要素はブラウザのネイティブなイベントと属性のプロトコルを使います。要素上で設定できるようにするには、props を明示的に宣言する必要があります。
🏷️ 関連レンダー関数と SSR
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q どんなときに必要ですか？
A Vue 以外のプロジェクトでコンポーネントを再利用したい場合や、プラットフォームの規格に沿って Web Component を提供したい場合です。
Q スタイルはページを汚染しますか？
A shadow DOM（styles オプション）を使えば分離できます。使わなければスタイルはグローバルに効きます。
Q Vue の中でも使えますか？
A 使えますが、普通のシナリオではコンポーネントを直接使えば十分で、カスタム要素を経由する必要はありません。
