[zh-cn] refactor Using_custom_elements #17038

YieldRay · 2023-11-20T05:52:26Z

The existing translation is outdated and contains incorrect translation, so I translated the latest English document, which significantly reduce misleading to reader.

Additional details

Source:
https://github.com/mdn/content/blob/main/files/en-us/web/api/web_components/using_custom_elements/index.md?plain=1

The existing translation is outdated and contains incorrect translation, so I translated the latest English document, which significantly reduce misleading to reader.

YieldRay · 2023-11-20T05:52:36Z

Dear reviewer, some term has no standard translation so I keep them as they are (mainly: autonomous custom element customized built-in elements shadow root), lines of the translated markdown file are consistent with the source file. Feel free to modify it.

files/zh-cn/web/api/web_components/using_custom_elements/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

github-actions · 2023-11-20T05:55:17Z

Preview URLs

/zh-CN/docs/Web/API/Web_components/Using_custom_elements

Flaws (1)

URL: /zh-CN/docs/Web/API/Web_components/Using_custom_elements
Title: 使用自定义元素
Flaw count: 1

macros:
- /zh-CN/docs/Web/API/HTMLUListElement does not exist but fell back to /en-US/docs/Web/API/HTMLUListElement

External URLs (6)

URL: /zh-CN/docs/Web/API/Web_components/Using_custom_elements
Title: 使用自定义元素

https://html.spec.whatwg.org/multipage/custom-elements.html (1 time) (Note! This may be a new URL 👀)
https://mdn.github.io/web-components-examples/ (1 time) (Note! This may be a new URL 👀)
https://mdn.github.io/web-components-examples/expanding-list-web-component/ (1 time) (Note! This may be a new URL 👀)
https://mdn.github.io/web-components-examples/life-cycle-callbacks/ (1 time) (Note! This may be a new URL 👀)
https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/ (1 time) (Note! This may be a new URL 👀)
https://mdn.github.io/web-components-examples/popup-info-box-web-component (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2023-11-25 08:11:16)

files/zh-cn/web/api/web_components/using_custom_elements/index.md

Co-authored-by: skyclouds2001 <[email protected]>

files/zh-cn/web/api/web_components/using_custom_elements/index.md

yin1999 · 2023-11-23T09:02:32Z

files/zh-cn/web/api/web_components/using_custom_elements/index.md


-{{domxref("CustomElementRegistry.define()")}} 方法用来注册一个 custom element，该方法接受以下参数：
+- **Customized built-in elements** 继承自标准的 HTML 元素，例如 {{domxref("HTMLImageElement")}} 或 {{domxref("HTMLParagraphElement")}}。它们的实现定义了标准元素的行为。


Suggested change

- **Customized built-in elements** 继承自标准的 HTML 元素，例如 {{domxref("HTMLImageElement")}} 或 {{domxref("HTMLParagraphElement")}}。它们的实现定义了标准元素的行为。

- **自定义内置元素**继承自标准的 HTML 元素，例如 {{domxref("HTMLImageElement")}} 或 {{domxref("HTMLParagraphElement")}}。它们的实现定义了标准元素的行为。

yin1999 · 2023-11-23T09:03:19Z

files/zh-cn/web/api/web_components/using_custom_elements/index.md


-{{domxref("CustomElementRegistry.define()")}} 方法用来注册一个 custom element，该方法接受以下参数：
+- **Customized built-in elements** 继承自标准的 HTML 元素，例如 {{domxref("HTMLImageElement")}} 或 {{domxref("HTMLParagraphElement")}}。它们的实现定义了标准元素的行为。
+- **Autonomous custom elements** 继承自 HTML 元素基类 {{domxref("HTMLElement")}}。你必须从头开始实现它们的行为。


Candidate translation

/cc @jasonren0403 what's your opinion?

Suggested change

- **Autonomous custom elements** 继承自 HTML 元素基类 {{domxref("HTMLElement")}}。你必须从头开始实现它们的行为。

- **独立自定义元素**继承自 HTML 元素基类 {{domxref("HTMLElement")}}。你必须从头开始实现它们的行为。

I prefer using this too 👍

yin1999 · 2023-11-23T09:04:29Z

files/zh-cn/web/api/web_components/using_custom_elements/index.md


-作为示例，我们可以像这样定义一个叫做 [word-count](https://mdn.github.io/web-components-examples/word-count-web-component/) 的 custom element：
+自定义元素作为一个[类](/docs/Web/JavaScript/Reference/Classes)来实现，该类可以扩展 {{domxref("HTMLElement")}}（对于 autonomous elements）或者你想要定制的接口（对于 customized built-in elements）。


Suggested change

自定义元素作为一个[类](/docs/Web/JavaScript/Reference/Classes)来实现，该类可以扩展 {{domxref("HTMLElement")}}（对于 autonomous elements）或者你想要定制的接口（对于 customized built-in elements）。

自定义元素作为一个[类](/docs/Web/JavaScript/Reference/Classes)来实现，该类可以扩展 {{domxref("HTMLElement")}}（即独立元素的情况）或者你想要定制的接口（即自定义内置元素的情况）。

files/zh-cn/web/api/web_components/using_custom_elements/index.md

…t-in elements'

yin1999

Valid update. Please check those comments before we can merge this :)

files/zh-cn/web/api/web_components/using_custom_elements/index.md

yin1999 · 2023-11-25T04:58:35Z

files/zh-cn/web/api/web_components/using_custom_elements/index.md

+    console.log("Custom element added to page.");
+  }

-    ...
+  disconnectedCallback() {
+    console.log("Custom element removed from page.");
+  }
+
+  adoptedCallback() {
+    console.log("Custom element moved to new page.");
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    console.log(`Attribute ${name} has changed.`);


could you translate those texts. This example is not a part of live examples (which are not localized). So it's better to localize them.

yin1999 · 2023-11-25T05:02:20Z

files/zh-cn/web/api/web_components/using_custom_elements/index.md

-    ...
+  attributeChangedCallback(name, oldValue, newValue) {
+    console.log(
+      `Attribute ${name} has changed from ${oldValue} to ${newValue}.`,


translate this

yin1999 · 2023-11-25T05:07:41Z

files/zh-cn/web/api/web_components/using_custom_elements/index.md

 ```

-上述代码片段中，类的构造函数{{jsxref("Classes.constructor","constructor")}}总是先调用[`super()`](/zh-CN/docs/Web/JavaScript/Reference/Operators/super)来建立正确的原型链继承关系。
+请注意，如果元素的 `HTML` 声明包含一个被观察的属性，那么在元素的声明首次解析时，`attributeChangedCallback()` 将被调用，即在属性被初始化后。因此，在以下示例中，即使属性再也没有被更改，当 DOM 被解析时，`attributeChangedCallback()` 也会被调用：（译注：即每个直接在 HTML 中声明的且被观察的属性会立即触发 `attributeChangedCallback()` 一次）


Let's remove all the translation note, if the body is not will written, please update the original English content.

Suggested change

请注意，如果元素的 `HTML` 声明包含一个被观察的属性，那么在元素的声明首次解析时，`attributeChangedCallback()` 将被调用，即在属性被初始化后。因此，在以下示例中，即使属性再也没有被更改，当 DOM 被解析时，`attributeChangedCallback()` 也会被调用：（译注：即每个直接在 HTML 中声明的且被观察的属性会立即触发 `attributeChangedCallback()` 一次）

请注意，如果元素的 `HTML` 声明包含一个被观察的属性，那么在元素的声明首次解析时，`attributeChangedCallback()` 将被调用，即在属性被初始化后。因此，在以下示例中，即使属性再也没有被更改，当 DOM 被解析时，`attributeChangedCallback()` 也会被调用：

yin1999 · 2023-11-25T05:08:51Z

files/zh-cn/web/api/web_components/using_custom_elements/index.md

+
+## 示例
+
+在本指南的其余部分，我们将看一些示例自定义元素。你可以在 [web-components-examples](https://github.com/mdn/web-components-examples) 存储库中找到所有这些示例的源代码，以及更多示例，并且你可以在 <https://mdn.github.io/web-components-examples/> 上实时查看它们。


We use "仓库" rather than "存储库" (align with other documents)

Suggested change

在本指南的其余部分，我们将看一些示例自定义元素。你可以在 [web-components-examples](https://github.com/mdn/web-components-examples) 存储库中找到所有这些示例的源代码，以及更多示例，并且你可以在 <https://mdn.github.io/web-components-examples/> 上实时查看它们。

在本指南的其余部分，我们将看一些示例自定义元素。你可以在 [web-components-examples](https://github.com/mdn/web-components-examples) 仓库中找到所有这些示例的源代码，以及更多示例，并且你可以在 <https://mdn.github.io/web-components-examples/> 上实时查看它们。

yin1999 · 2023-11-25T05:18:41Z

files/zh-cn/web/api/web_components/using_custom_elements/index.md

- `disconnectedCallback`：当 custom element 从文档 DOM 中删除时，被调用。
- `adoptedCallback`：当 custom element 被移动到新的文档时，被调用。
- `attributeChangedCallback`: 当 custom element 增加、删除、修改自身属性时，被调用。
+到目前为止，我们只看到了一个生命周期回调的实际应用：`connectedCallback()`。在最后一个例子中，`<custom-square>`，我们将看到一些其他的回调。`<custom-square>` 独立自定义元素绘制一个正方形，其大小和颜色由两个名为 `"size"` 和 `"color"` 的属性确定。


Suggested change

到目前为止，我们只看到了一个生命周期回调的实际应用：`connectedCallback()`。在最后一个例子中，`<custom-square>`，我们将看到一些其他的回调。`<custom-square>` 独立自定义元素绘制一个正方形，其大小和颜色由两个名为 `"size"` 和 `"color"` 的属性确定。

到目前为止，我们只看到了一个生命周期回调的实际应用：`connectedCallback()`。在最后一个示例——`<custom-square>`——中，我们将看到一些其他的回调。`<custom-square>` 独立自定义元素绘制一个正方形，其大小和颜色由两个名为 `"size"` 和 `"color"` 的属性确定。

Co-authored-by: A1lo <[email protected]>

files/zh-cn/web/api/web_components/using_custom_elements/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

YieldRay · 2023-11-25T08:09:09Z

May be we need to update translation for Using_shadow_DOM one day.

yin1999

Thanks @YieldRay, @skyclouds2001!

yin1999 · 2023-11-25T08:22:05Z

May be we need to update translation for Using_shadow_DOM one day.

Feel free to update it whenever you have time.

Update index.md

a4eaf65

The existing translation is outdated and contains incorrect translation, so I translated the latest English document, which significantly reduce misleading to reader.

YieldRay requested a review from a team as a code owner November 20, 2023 05:52

YieldRay requested review from t7yang and removed request for a team November 20, 2023 05:52

github-actions bot added the l10n-zh Issues related to Chinese content. label Nov 20, 2023

github-actions bot reviewed Nov 20, 2023

View reviewed changes

YieldRay and others added 2 commits November 20, 2023 13:54

Update files/zh-cn/web/api/web_components/using_custom_elements/index.md

016ec0a

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Update files/zh-cn/web/api/web_components/using_custom_elements/index.md

3fd85f8

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

lint fixes

1de95ae

yin1999 self-assigned this Nov 21, 2023

yin1999 removed the request for review from t7yang November 21, 2023 08:51

skyclouds2001 reviewed Nov 21, 2023

View reviewed changes

YieldRay and others added 4 commits November 21, 2023 18:34

Update files/zh-cn/web/api/web_components/using_custom_elements/index.md

7abbdac

Co-authored-by: skyclouds2001 <[email protected]>

Update files/zh-cn/web/api/web_components/using_custom_elements/index.md

ae2c1f6

Co-authored-by: skyclouds2001 <[email protected]>

add translation for comments

a0bfc2a

fix lint

bb6c83d

YieldRay requested a review from skyclouds2001 November 22, 2023 15:05

yin1999 reviewed Nov 23, 2023

View reviewed changes

YieldRay added 3 commits November 23, 2023 22:13

translation for shadow root & shadow DOM etc

0b0a89f

fix one glitch

1defdcc

add translation for 'autonomous custom elements' and 'customized buil…

fdf5378

…t-in elements'

YieldRay requested a review from yin1999 November 24, 2023 12:09

yin1999 added 3 commits November 25, 2023 12:46

Update index.md

9fe513b

Merge remote-tracking branch 'upstream/main' into pr/YieldRay/17038

58d35ff

fix broken links

d29b6ce

yin1999 reviewed Nov 25, 2023

View reviewed changes

Update files/zh-cn/web/api/web_components/using_custom_elements/index.md

356cd7b

Co-authored-by: A1lo <[email protected]>

YieldRay and others added 2 commits November 25, 2023 15:24

Update files/zh-cn/web/api/web_components/using_custom_elements/index.md

5fcb824

Co-authored-by: A1lo <[email protected]>

add translation for log content & apply suggestion

7957378

github-actions bot reviewed Nov 25, 2023

View reviewed changes

files/zh-cn/web/api/web_components/using_custom_elements/index.md Outdated Show resolved Hide resolved

Update files/zh-cn/web/api/web_components/using_custom_elements/index.md

7935415

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

yin1999 approved these changes Nov 25, 2023

View reviewed changes

yin1999 merged commit c0af68d into mdn:main Nov 25, 2023
7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[zh-cn] refactor Using_custom_elements #17038

[zh-cn] refactor Using_custom_elements #17038

YieldRay commented Nov 20, 2023

YieldRay commented Nov 20, 2023

github-actions bot commented Nov 20, 2023 •

edited

Loading

yin1999 Nov 23, 2023

yin1999 Nov 23, 2023

jasonren0403 Nov 23, 2023 •

edited

Loading

yin1999 Nov 23, 2023

yin1999 left a comment

yin1999 Nov 25, 2023

YieldRay Nov 25, 2023

yin1999 Nov 25, 2023

yin1999 Nov 25, 2023

yin1999 Nov 25, 2023

yin1999 Nov 25, 2023

YieldRay commented Nov 25, 2023

yin1999 left a comment

yin1999 commented Nov 25, 2023


		{{domxref("CustomElementRegistry.define()")}} 方法用来注册一个 custom element，该方法接受以下参数：
		- Customized built-in elements 继承自标准的 HTML 元素，例如 {{domxref("HTMLImageElement")}} 或 {{domxref("HTMLParagraphElement")}}。它们的实现定义了标准元素的行为。

	- Customized built-in elements 继承自标准的 HTML 元素，例如 {{domxref("HTMLImageElement")}} 或 {{domxref("HTMLParagraphElement")}}。它们的实现定义了标准元素的行为。
	- 自定义内置元素继承自标准的 HTML 元素，例如 {{domxref("HTMLImageElement")}} 或 {{domxref("HTMLParagraphElement")}}。它们的实现定义了标准元素的行为。

	- Autonomous custom elements 继承自 HTML 元素基类 {{domxref("HTMLElement")}}。你必须从头开始实现它们的行为。
	- 独立自定义元素继承自 HTML 元素基类 {{domxref("HTMLElement")}}。你必须从头开始实现它们的行为。


		作为示例，我们可以像这样定义一个叫做 [word-count](https://mdn.github.io/web-components-examples/word-count-web-component/) 的 custom element：
		自定义元素作为一个[类](/docs/Web/JavaScript/Reference/Classes)来实现，该类可以扩展 {{domxref("HTMLElement")}}（对于 autonomous elements）或者你想要定制的接口（对于 customized built-in elements）。


		## 示例

		在本指南的其余部分，我们将看一些示例自定义元素。你可以在 [web-components-examples](https://github.com/mdn/web-components-examples) 存储库中找到所有这些示例的源代码，以及更多示例，并且你可以在 <https://mdn.github.io/web-components-examples/> 上实时查看它们。

	到目前为止，我们只看到了一个生命周期回调的实际应用：`connectedCallback()`。在最后一个例子中，`<custom-square>`，我们将看到一些其他的回调。`<custom-square>` 独立自定义元素绘制一个正方形，其大小和颜色由两个名为 `"size"` 和 `"color"` 的属性确定。
	到目前为止，我们只看到了一个生命周期回调的实际应用：`connectedCallback()`。在最后一个示例——`<custom-square>`——中，我们将看到一些其他的回调。`<custom-square>` 独立自定义元素绘制一个正方形，其大小和颜色由两个名为 `"size"` 和 `"color"` 的属性确定。

[zh-cn] refactor Using_custom_elements #17038

[zh-cn] refactor Using_custom_elements #17038

Conversation

YieldRay commented Nov 20, 2023

Additional details

YieldRay commented Nov 20, 2023

github-actions bot commented Nov 20, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jasonren0403 Nov 23, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yin1999 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

YieldRay commented Nov 25, 2023

yin1999 left a comment

Choose a reason for hiding this comment

yin1999 commented Nov 25, 2023

github-actions bot commented Nov 20, 2023 •

edited

Loading

jasonren0403 Nov 23, 2023 •

edited

Loading