diff --git a/files/zh-cn/web/api/web_components/using_custom_elements/index.md b/files/zh-cn/web/api/web_components/using_custom_elements/index.md index 00b9249d6e445b..8a83242c6f1830 100644 --- a/files/zh-cn/web/api/web_components/using_custom_elements/index.md +++ b/files/zh-cn/web/api/web_components/using_custom_elements/index.md @@ -13,12 +13,12 @@ Web 组件的一个关键特性是创建*自定义元素*:即由 Web 开发人 有两种类型的自定义元素: -- **Customized built-in elements** 继承自标准的 HTML 元素,例如 {{domxref("HTMLImageElement")}} 或 {{domxref("HTMLParagraphElement")}}。它们的实现定义了标准元素的行为。 -- **Autonomous custom elements** 继承自 HTML 元素基类 {{domxref("HTMLElement")}}。你必须从头开始实现它们的行为。 +- **自定义内置元素** 继承自标准的 HTML 元素,例如 {{domxref("HTMLImageElement")}} 或 {{domxref("HTMLParagraphElement")}}。它们的实现定义了标准元素的行为。 +- **独立自定义元素** 继承自 HTML 元素基类 {{domxref("HTMLElement")}}。你必须从头开始实现它们的行为。 ## 实现自定义元素 -自定义元素作为一个[类](/docs/Web/JavaScript/Reference/Classes)来实现,该类可以扩展 {{domxref("HTMLElement")}}(对于 autonomous elements)或者你想要定制的接口(对于 customized built-in elements)。 +自定义元素作为一个[类](/docs/Web/JavaScript/Reference/Classes)来实现,该类可以扩展 {{domxref("HTMLElement")}}(在独立元素的情况下)或者你想要定制的接口(在自定义内置元素的情况下)。 以下是一个最小自定义元素的实现示例,该元素定制了 {{HTMLElement("p")}} 元素: @@ -31,7 +31,7 @@ class WordCount extends HTMLParagraphElement { } ``` -以下是一个 autonomous custom element 的最小实现: +以下是一个独立自定义元素的最小实现: ```js class PopupInfo extends HTMLElement { @@ -98,15 +98,15 @@ customElements.define("my-custom-element", MyCustomElement); - `constructor` - : 自定义元素的构造函数。 - `options` - - : 仅对于 customized built-in elements,这是一个包含单个属性 `extends` 的对象,该属性是一个字符串,命名了要扩展的内置元素。 + - : 仅对于自定义内置元素,这是一个包含单个属性 `extends` 的对象,该属性是一个字符串,命名了要扩展的内置元素。 -例如,以下代码注册了名为 `WordCount` 的 customized built-in element: +例如,以下代码注册了名为 `WordCount` 的自定义内置元素: ```js customElements.define("word-count", WordCount, { extends: "p" }); ``` -以下代码注册了名为 `PopupInfo` 的 autonomous custom element: +以下代码注册了名为 `PopupInfo` 的独立自定义元素: ```js customElements.define("popup-info", PopupInfo); @@ -122,7 +122,7 @@ customElements.define("popup-info", PopupInfo);
``` -要使用 autonomous custom element,就像使用内置的 HTML 元素一样,使用自定义名称即可: +要使用独立自定义元素,就像使用内置的 HTML 元素一样,使用自定义名称即可: ```html