From 49413ced8a3d8acf693bb9ed48d4df2b428662a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=80=E7=BA=B8=E5=BF=98=E5=BF=A7?= <i@ikxin.com>
Date: Wed, 11 Sep 2024 09:24:07 +0800
Subject: [PATCH 1/7] docs: translate custom-elements.md

---
 src/api/custom-elements.md | 39 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/api/custom-elements.md b/src/api/custom-elements.md
index 4f0952f96..355c2e6b9 100644
--- a/src/api/custom-elements.md
+++ b/src/api/custom-elements.md
@@ -1,11 +1,10 @@
-<!-- TODO: translation -->
-# Custom Elements API {#custom-elements-api}
+# 自定义元素 API {#custom-elements-api}
 
 ## defineCustomElement() {#definecustomelement}
 
-This method accepts the same argument as [`defineComponent`](#definecomponent), but instead returns a native [Custom Element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) class constructor.
+此方法接受与 [`defineComponent`](#definecomponent) 相同参数，但返回一个原生 [Custom Element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) 类构造函数。
 
-- **Type**
+- **类型**
 
   ```ts
   function defineCustomElement(
@@ -27,21 +26,21 @@ This method accepts the same argument as [`defineComponent`](#definecomponent),
   }
   ```
 
-  > Type is simplified for readability.
+  > 类型为简化版，便于阅读。
 
-- **Details**
+- **详情**
 
-  In addition to normal component options, `defineCustomElement()` also supports a number of options that are custom-elements-specific:
+  除了标准组件选项，`defineCustomElement()` 还支持一系列特定于自定义元素的选项：
 
-  - **`styles`**: an array of inlined CSS strings for providing CSS that should be injected into the element's shadow root.
+  - **`styles`**: 一个内联 CSS 字符串数组，用于提供应注入元素阴影根的 CSS。
 
-  - **`configureApp`** <sup class="vt-badge" data-text="3.5+"/>: a function that can be used to configure the Vue app instance for the custom element.
+  - **`configureApp`** <sup class="vt-badge" data-text="3.5+"/>: 一个函数，可用于配置自定义元素的 Vue 应用实例。
 
-  - **`shadowRoot`** <sup class="vt-badge" data-text="3.5+"/>: `boolean`, defaults to `true`. Set to `false` to render the custom element without a shadow root. This means `<style>` in custom element SFCs will no longer be encapsulated.
+  - **`shadowRoot`** <sup class="vt-badge" data-text="3.5+"/>: `boolean`，默认为 `true`。设置为 `false` 以在不带阴影根的情况下渲染自定义元素。这意味着自定义元素 SFCs 中的 `<style>` 将不再被封装。
 
-  - **`nonce`** <sup class="vt-badge" data-text="3.5+"/>: `string`, if provided, will be set as the `nonce` attribute on style tags injected to the shadow root.
+  - **`nonce`** <sup class="vt-badge" data-text="3.5+"/>: `string`，如果提供，将作为注入到阴影根的样式标签上的 `nonce` 属性。
 
-  Note that instead of being passed as part of the component itself, these options can also be passed via a second argument:
+  注意，这些选项不是作为组件本身的一部分传递，也可以通过第二个参数传递：
 
   ```js
   import Element from './MyElement.ce.vue'
@@ -53,9 +52,9 @@ This method accepts the same argument as [`defineComponent`](#definecomponent),
   })
   ```
 
-  The return value is a custom element constructor that can be registered using [`customElements.define()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define).
+  返回值是一个自定义元素构造函数，可以使用 [`customElements.define()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) 注册。
 
-- **Example**
+- **示例**
 
   ```js
   import { defineCustomElement } from 'vue'
@@ -68,20 +67,20 @@ This method accepts the same argument as [`defineComponent`](#definecomponent),
   customElements.define('my-vue-element', MyVueElement)
   ```
 
-- **See also**
+- **参考**
 
-  - [Guide - Building Custom Elements with Vue](/guide/extras/web-components#building-custom-elements-with-vue)
+  - [指南 - 使用 Vue 构建自定义元素](/guide/extras/web-components#building-custom-elements-with-vue)
 
-  - Also note that `defineCustomElement()` requires [special config](/guide/extras/web-components#sfc-as-custom-element) when used with Single-File Components.
+  - 请注意，使用 Single-File Components 时，`defineCustomElement()` 需要 [特殊配置](/guide/extras/web-components#sfc-as-custom-element)。
 
 ## useHost() <sup class="vt-badge" data-text="3.5+"/> {#usehost}
 
-A Composition API helper that returns the host element of the current Vue custom element.
+一个 Composition API 助手，返回当前 Vue 自定义元素的主元素。
 
 ## useShadowRoot() <sup class="vt-badge" data-text="3.5+"/> {#useshadowroot}
 
-A Composition API helper that returns the shadow root of the current Vue custom element.
+一个 Composition API 助手，返回当前 Vue 自定义元素的阴影根。
 
 ## this.$host <sup class="vt-badge" data-text="3.5+"/> {#this-host}
 
-An Options API property that exposes the host element of the current Vue custom element.
+一个 Options API 属性，公开当前 Vue 自定义元素的主元素。

From fb0d978f836207ca5afdff3d3d9cf1faca97a9f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=80=E7=BA=B8=E5=BF=98=E5=BF=A7?=
 <54543761+ikxin@users.noreply.github.com>
Date: Wed, 11 Sep 2024 21:56:22 +0800
Subject: [PATCH 2/7] Apply suggestions from code review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 时瑶 <26200808+KiritaniAyaka@users.noreply.github.com>
---
 src/api/custom-elements.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/api/custom-elements.md b/src/api/custom-elements.md
index 355c2e6b9..7ec6999ec 100644
--- a/src/api/custom-elements.md
+++ b/src/api/custom-elements.md
@@ -2,7 +2,7 @@
 
 ## defineCustomElement() {#definecustomelement}
 
-此方法接受与 [`defineComponent`](#definecomponent) 相同参数，但返回一个原生 [Custom Element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) 类构造函数。
+此方法接受的参数与 [`defineComponent`](#definecomponent) 相同，但返回一个原生 [Custom Element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) 类构造函数。
 
 - **类型**
 
@@ -36,11 +36,11 @@
 
   - **`configureApp`** <sup class="vt-badge" data-text="3.5+"/>: 一个函数，可用于配置自定义元素的 Vue 应用实例。
 
-  - **`shadowRoot`** <sup class="vt-badge" data-text="3.5+"/>: `boolean`，默认为 `true`。设置为 `false` 以在不带阴影根的情况下渲染自定义元素。这意味着自定义元素 SFCs 中的 `<style>` 将不再被封装。
+  - **`shadowRoot`** <sup class="vt-badge" data-text="3.5+"/>: `boolean`，默认为 `true`。设置为 `false` 以在不带阴影根的情况下渲染自定义元素。这意味着自定义元素单文件组件中的 `<style>` 将不再被封装。
 
   - **`nonce`** <sup class="vt-badge" data-text="3.5+"/>: `string`，如果提供，将作为注入到阴影根的样式标签上的 `nonce` 属性。
 
-  注意，这些选项不是作为组件本身的一部分传递，也可以通过第二个参数传递：
+  注意，这些选项也可以不作为组件本身的一部分传递，而是通过第二个参数传递：
 
   ```js
   import Element from './MyElement.ce.vue'
@@ -71,11 +71,11 @@
 
   - [指南 - 使用 Vue 构建自定义元素](/guide/extras/web-components#building-custom-elements-with-vue)
 
-  - 请注意，使用 Single-File Components 时，`defineCustomElement()` 需要 [特殊配置](/guide/extras/web-components#sfc-as-custom-element)。
+  - 请注意，使用单文件组件时，`defineCustomElement()` 需要 [特殊配置](/guide/extras/web-components#sfc-as-custom-element)。
 
 ## useHost() <sup class="vt-badge" data-text="3.5+"/> {#usehost}
 
-一个 Composition API 助手，返回当前 Vue 自定义元素的主元素。
+一个 Composition API 助手，返回当前 Vue 自定义元素的宿主元素。
 
 ## useShadowRoot() <sup class="vt-badge" data-text="3.5+"/> {#useshadowroot}
 
@@ -83,4 +83,4 @@
 
 ## this.$host <sup class="vt-badge" data-text="3.5+"/> {#this-host}
 
-一个 Options API 属性，公开当前 Vue 自定义元素的主元素。
+一个 Options API 属性，公开当前 Vue 自定义元素的宿主元素。

From 60df05fe99110d679e97979820574e5458403f54 Mon Sep 17 00:00:00 2001
From: GU Yiling <justice360@gmail.com>
Date: Thu, 12 Sep 2024 13:28:23 +0800
Subject: [PATCH 3/7] Apply suggestions from code review

---
 src/api/custom-elements.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/api/custom-elements.md b/src/api/custom-elements.md
index 7ec6999ec..a66631c97 100644
--- a/src/api/custom-elements.md
+++ b/src/api/custom-elements.md
@@ -30,15 +30,15 @@
 
 - **详情**
 
-  除了标准组件选项，`defineCustomElement()` 还支持一系列特定于自定义元素的选项：
+  除了常规的组件选项，`defineCustomElement()` 还支持一系列特定于自定义元素的选项：
 
   - **`styles`**: 一个内联 CSS 字符串数组，用于提供应注入元素阴影根的 CSS。
 
-  - **`configureApp`** <sup class="vt-badge" data-text="3.5+"/>: 一个函数，可用于配置自定义元素的 Vue 应用实例。
+  - **`configureApp`** <sup class="vt-badge" data-text="3.5+"/>：一个函数，可用于配置自定义元素的 Vue 应用实例。
 
-  - **`shadowRoot`** <sup class="vt-badge" data-text="3.5+"/>: `boolean`，默认为 `true`。设置为 `false` 以在不带阴影根的情况下渲染自定义元素。这意味着自定义元素单文件组件中的 `<style>` 将不再被封装。
+  - **`shadowRoot`** <sup class="vt-badge" data-text="3.5+"/>: `boolean`，默认为 `true`。设置为 `false` 以在不带 shadow root 的情况下渲染自定义元素。这意味着自定义元素单文件组件中的 `<style>` 将不再被封装隔离。
 
-  - **`nonce`** <sup class="vt-badge" data-text="3.5+"/>: `string`，如果提供，将作为注入到阴影根的样式标签上的 `nonce` 属性。
+  - **`nonce`** <sup class="vt-badge" data-text="3.5+"/>：`string`，如果提供，将在注入到 shadow root 样式标签上设置 `nonce` attribute。
 
   注意，这些选项也可以不作为组件本身的一部分传递，而是通过第二个参数传递：
 
@@ -71,16 +71,16 @@
 
   - [指南 - 使用 Vue 构建自定义元素](/guide/extras/web-components#building-custom-elements-with-vue)
 
-  - 请注意，使用单文件组件时，`defineCustomElement()` 需要 [特殊配置](/guide/extras/web-components#sfc-as-custom-element)。
+  - 请注意，使用单文件组件时，`defineCustomElement()` 需要进行[特殊配置](/guide/extras/web-components#sfc-as-custom-element)。
 
 ## useHost() <sup class="vt-badge" data-text="3.5+"/> {#usehost}
 
-一个 Composition API 助手，返回当前 Vue 自定义元素的宿主元素。
+一个组合式 API 辅助函数，返回当前 Vue 自定义元素的宿主元素。
 
 ## useShadowRoot() <sup class="vt-badge" data-text="3.5+"/> {#useshadowroot}
 
-一个 Composition API 助手，返回当前 Vue 自定义元素的阴影根。
+一个组合式 API 辅助函数，返回当前 Vue 自定义元素的 shadow root。
 
 ## this.$host <sup class="vt-badge" data-text="3.5+"/> {#this-host}
 
-一个 Options API 属性，公开当前 Vue 自定义元素的宿主元素。
+一个选项式 API 的 property，暴露当前 Vue 自定义元素的宿主元素。

From 8333e0d7899141c96d08dddb0626f0f61cee2e39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=80=E7=BA=B8=E5=BF=98=E5=BF=A7?=
 <54543761+ikxin@users.noreply.github.com>
Date: Thu, 12 Sep 2024 14:44:14 +0800
Subject: [PATCH 4/7] Update custom-elements.md

---
 src/api/custom-elements.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/api/custom-elements.md b/src/api/custom-elements.md
index a66631c97..9c49ebd6f 100644
--- a/src/api/custom-elements.md
+++ b/src/api/custom-elements.md
@@ -19,7 +19,7 @@
   interface CustomElementsOptions {
     styles?: string[]
 
-    // the following options are 3.5+
+    // 以下选项为 3.5+ 版本
     configureApp?: (app: App) => void
     shadowRoot?: boolean
     nonce?: string
@@ -60,10 +60,10 @@
   import { defineCustomElement } from 'vue'
 
   const MyVueElement = defineCustomElement({
-    /* component options */
+    /* 组件选项 */
   })
 
-  // Register the custom element.
+  // 注册自定义元素
   customElements.define('my-vue-element', MyVueElement)
   ```
 

From 4bfa1c1834b1ac4b5f98c0c8b93337aa61a776fd Mon Sep 17 00:00:00 2001
From: GU Yiling <justice360@gmail.com>
Date: Thu, 12 Sep 2024 14:57:37 +0800
Subject: [PATCH 5/7] Update src/api/custom-elements.md

---
 src/api/custom-elements.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/custom-elements.md b/src/api/custom-elements.md
index 9c49ebd6f..fb8080f9b 100644
--- a/src/api/custom-elements.md
+++ b/src/api/custom-elements.md
@@ -19,7 +19,7 @@
   interface CustomElementsOptions {
     styles?: string[]
 
-    // 以下选项为 3.5+ 版本
+    // 以下选项在 3.5+ 版本中支持
     configureApp?: (app: App) => void
     shadowRoot?: boolean
     nonce?: string

From 8e5671a8e100db5dc081879e09a8fc5c24637907 Mon Sep 17 00:00:00 2001
From: GU Yiling <justice360@gmail.com>
Date: Thu, 12 Sep 2024 15:41:03 +0800
Subject: [PATCH 6/7] Apply suggestions from code review

---
 src/api/custom-elements.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/api/custom-elements.md b/src/api/custom-elements.md
index fb8080f9b..5746a9cd9 100644
--- a/src/api/custom-elements.md
+++ b/src/api/custom-elements.md
@@ -2,7 +2,7 @@
 
 ## defineCustomElement() {#definecustomelement}
 
-此方法接受的参数与 [`defineComponent`](#definecomponent) 相同，但返回一个原生 [Custom Element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) 类构造函数。
+此方法接受的参数与 [`defineComponent`](#definecomponent) 相同，但返回一个原生[自定义元素](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_custom_elements)类构造函数。
 
 - **类型**
 
@@ -52,7 +52,7 @@
   })
   ```
 
-  返回值是一个自定义元素构造函数，可以使用 [`customElements.define()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) 注册。
+  返回值是一个自定义元素构造函数，可以使用 [`customElements.define()`](https://developer.mozilla.org/zh-CN/docs/Web/API/CustomElementRegistry/define) 注册。
 
 - **示例**
 

From a1e4f411e258131e73a72cae4866af15d14c609c Mon Sep 17 00:00:00 2001
From: GU Yiling <justice360@gmail.com>
Date: Thu, 12 Sep 2024 15:44:02 +0800
Subject: [PATCH 7/7] Apply suggestions from code review

---
 src/api/custom-elements.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/api/custom-elements.md b/src/api/custom-elements.md
index 5746a9cd9..b41585866 100644
--- a/src/api/custom-elements.md
+++ b/src/api/custom-elements.md
@@ -32,11 +32,11 @@
 
   除了常规的组件选项，`defineCustomElement()` 还支持一系列特定于自定义元素的选项：
 
-  - **`styles`**: 一个内联 CSS 字符串数组，用于提供应注入元素阴影根的 CSS。
+  - **`styles`**：一个内联 CSS 字符串数组，用于提供应注入元素 shadow root 的 CSS。
 
   - **`configureApp`** <sup class="vt-badge" data-text="3.5+"/>：一个函数，可用于配置自定义元素的 Vue 应用实例。
 
-  - **`shadowRoot`** <sup class="vt-badge" data-text="3.5+"/>: `boolean`，默认为 `true`。设置为 `false` 以在不带 shadow root 的情况下渲染自定义元素。这意味着自定义元素单文件组件中的 `<style>` 将不再被封装隔离。
+  - **`shadowRoot`** <sup class="vt-badge" data-text="3.5+"/>：`boolean`，默认为 `true`。设置为 `false` 以在不带 shadow root 的情况下渲染自定义元素。这意味着自定义元素单文件组件中的 `<style>` 将不再被封装隔离。
 
   - **`nonce`** <sup class="vt-badge" data-text="3.5+"/>：`string`，如果提供，将在注入到 shadow root 样式标签上设置 `nonce` attribute。