diff --git a/.vitepress/config.ts b/.vitepress/config.ts
index 81db06315..ddbc4d7b0 100644
--- a/.vitepress/config.ts
+++ b/.vitepress/config.ts
@@ -421,6 +421,7 @@ export const sidebar: ThemeConfig['sidebar'] = {
{
text: '高度な API',
items: [
+ { text: 'カスタム要素', link: '/api/custom-elements' },
{ text: 'レンダー関数', link: '/api/render-function' },
{ text: 'サーバーサイドレンダリング', link: '/api/ssr' },
{ text: 'TypeScript ユーティリティー', link: '/api/utility-types' }, // /api/ で折り返されないよう「型」を省略
diff --git a/src/api/custom-elements.md b/src/api/custom-elements.md
new file mode 100644
index 000000000..c675f09fe
--- /dev/null
+++ b/src/api/custom-elements.md
@@ -0,0 +1,86 @@
+# カスタム要素 API {#custom-elements-api}
+
+## defineCustomElement() {#definecustomelement}
+
+このメソッドは [`defineComponent`](#definecomponent) と同じ引数を受け取りますが、代わりにネイティブの[カスタム要素](https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_custom_elements)クラスのコンストラクタを返します。
+
+- **型**
+
+ ```ts
+ function defineCustomElement(
+ component:
+ | (ComponentOptions & CustomElementsOptions)
+ | ComponentOptions['setup'],
+ options?: CustomElementsOptions
+ ): {
+ new (props?: object): HTMLElement
+ }
+
+ interface CustomElementsOptions {
+ styles?: string[]
+
+ // 以下のオプションは 3.5 以上で利用可能
+ configureApp?: (app: App) => void
+ shadowRoot?: boolean
+ nonce?: string
+ }
+ ```
+
+ > 読みやすくするため、型は単純化されています。
+
+- **詳細**
+
+ 通常のコンポーネントオプションに加えて、 `defineCustomElement()` はカスタム要素固有のいくつかのオプションをサポートします:
+
+ - **`styles`**: 要素のシャドウルートに注入する CSS を提供するためのインラインの CSS 文字列の配列。
+
+ - **`configureApp`** : カスタム要素に対して Vue アプリケーションインスタンスを設定するために使用できる関数。
+
+ - **`shadowRoot`** : `boolean`、デフォルトは `true`。`false` に設定すると、シャドウルートなしでカスタム要素をレンダリングします。これは、カスタム要素 SFC の `