From 8a7a19c5e94997970bfd801c527f47e7fc677637 Mon Sep 17 00:00:00 2001
From: liangzdz <liangzdz@gmail.com>
Date: Fri, 19 Jun 2020 12:45:43 +0000
Subject: [PATCH 1/2] Translate index.md via GitLocalize

---
 .../fundamentals/web-components/index.md      | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 src/content/zh-cn/fundamentals/web-components/index.md

diff --git a/src/content/zh-cn/fundamentals/web-components/index.md b/src/content/zh-cn/fundamentals/web-components/index.md
new file mode 100644
index 00000000000..4427cc878be
--- /dev/null
+++ b/src/content/zh-cn/fundamentals/web-components/index.md
@@ -0,0 +1,61 @@
+project_path: /web/fundamentals/_project.yaml
+book_path: /web/fundamentals/_book.yaml
+description: 组件是现代网络应用的构建块。在构建您自己的组件时，应遵循哪些最佳实践，以便让它们经得起时间的考验？
+
+{# wf_updated_on: 2018-09-20 #}
+{# wf_published_on: 2017-08-14 #}
+{# wf_blink_components: Blink>DOM #}
+
+<style>
+nav.devsite-page-nav, .devsite-rating-container {display:none;}
+</style>
+
+# 构建组件 {: .page-title }
+
+Components are the building blocks of modern web applications. What best
+practices should you follow when building your own components so they can stand
+the test of time?
+
+<div class="attempt-left">
+  <h2><a href="./customelements">Custom Elements</a></h2>
+  <a href="./customelements">
+    <img width="48" src="https://github.com/google/WebFundamentals/blob/master/web/images/md-icons/ic_code_black_24px.svg?raw=true" class="attempt-right">
+  </a>
+  <p>自定义元素让开发者能够扩展 HTML 和创建自己的标记。由于自定义元素基于标准，他们可以从网络的内置组件模型中受益。这样一来，可以在许多不同的上下文中重用更模块化的代码。</p>
+  <a href="./customelements" class="button button-primary">Learn more</a>
+</div>
+
+<div class="attempt-right">
+  <h2><a href="./shadowdom">Shadow DOM</a></h2>
+  <a href="./shadowdom">
+    <img width="48" src="https://github.com/google/WebFundamentals/blob/master/web/images/md-icons/ic_border_style_black_24px.svg?raw=true" class="attempt-right">
+  </a>
+  <p>     Shadow DOM 是一种提供组件样式和标记封装的网络标准。它是网络组件至关重要的一部分，因为它可以确保组件在任何环境中运行，即使其他 CSS 或 JavaScript 正在页面上运行。</p>
+  <a href="./shadowdom" class="button button-primary">Learn more</a>
+</div>
+
+<div style="clear:both;"></div>
+
+<div class="attempt-left">
+  <h2><a href="./best-practices">Best Practices</a></h2>
+  <a href="./best-practices">
+    <img width="48" src="https://github.com/google/WebFundamentals/blob/master/web/images/md-icons/ic_done_black_24px.svg?raw=true" class="attempt-right">
+  </a>
+  <p>由于自定义元素和 Shadow DOM 属于低级别原语，如何充分组合使用它们来创建可靠并且能在许多不同的环境中正常运行的组件并不总是十分清楚。而使用这些 API，您可以实现所有这些，下面是一些可以帮助您确保组件在任何地方都能正常运行的最佳实践。</p>
+  <a href="./best-practices" class="button button-primary">Learn more</a>
+</div>
+
+<div class="attempt-right">
+  <h2><a href="./examples/">示例</a></h2>
+  <a href="./examples/">
+    <img width="48" src="https://github.com/google/WebFundamentals/blob/master/web/images/md-icons/ic_explore_black_24px.svg?raw=true" class="attempt-right">
+  </a>
+  <p>HowTo-Components 是一组展示自定义元素和 Shadow DOM 最佳实践的元素。这些元素并不用于生产环境，而是作为教学助手来帮助将最佳实践建议映射到实际实现。</p>
+  <a href="./examples/" class="button button-primary">Learn more</a>
+</div>
+
+<div style="clear:both;"></div>
+
+## Feedback {: #feedback }
+
+{% include "web/_shared/helpful.html" %}

From 83f62eb0adcfccb3fe2fe32a6ab2881d08254651 Mon Sep 17 00:00:00 2001
From: Henry Lim <henrylim.everything@gmail.com>
Date: Fri, 19 Jun 2020 12:45:45 +0000
Subject: [PATCH 2/2] Translate index.md via GitLocalize

---
 .../fundamentals/web-components/index.md      | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/content/zh-cn/fundamentals/web-components/index.md b/src/content/zh-cn/fundamentals/web-components/index.md
index 4427cc878be..e21fc266ebf 100644
--- a/src/content/zh-cn/fundamentals/web-components/index.md
+++ b/src/content/zh-cn/fundamentals/web-components/index.md
@@ -2,9 +2,7 @@ project_path: /web/fundamentals/_project.yaml
 book_path: /web/fundamentals/_book.yaml
 description: 组件是现代网络应用的构建块。在构建您自己的组件时，应遵循哪些最佳实践，以便让它们经得起时间的考验？
 
-{# wf_updated_on: 2018-09-20 #}
-{# wf_published_on: 2017-08-14 #}
-{# wf_blink_components: Blink>DOM #}
+{# wf_updated_on: 2018-09-20 #} {# wf_published_on: 2017-08-14 #} {# wf_blink_components: Blink>DOM #}
 
 <style>
 nav.devsite-page-nav, .devsite-rating-container {display:none;}
@@ -12,17 +10,15 @@ nav.devsite-page-nav, .devsite-rating-container {display:none;}
 
 # 构建组件 {: .page-title }
 
-Components are the building blocks of modern web applications. What best
-practices should you follow when building your own components so they can stand
-the test of time?
+组件是现代Web应用程序的基础。 当您在构建自己的组件时，您应该遵循哪些实践，以经得起时间的考验？
 
 <div class="attempt-left">
-  <h2><a href="./customelements">Custom Elements</a></h2>
+  <h2><a href="./customelements">自定义元素 (Custom Elements)</a></h2>
   <a href="./customelements">
     <img width="48" src="https://github.com/google/WebFundamentals/blob/master/web/images/md-icons/ic_code_black_24px.svg?raw=true" class="attempt-right">
   </a>
   <p>自定义元素让开发者能够扩展 HTML 和创建自己的标记。由于自定义元素基于标准，他们可以从网络的内置组件模型中受益。这样一来，可以在许多不同的上下文中重用更模块化的代码。</p>
-  <a href="./customelements" class="button button-primary">Learn more</a>
+  <a href="./customelements" class="button button-primary">更多内容</a>
 </div>
 
 <div class="attempt-right">
@@ -31,18 +27,18 @@ the test of time?
     <img width="48" src="https://github.com/google/WebFundamentals/blob/master/web/images/md-icons/ic_border_style_black_24px.svg?raw=true" class="attempt-right">
   </a>
   <p>     Shadow DOM 是一种提供组件样式和标记封装的网络标准。它是网络组件至关重要的一部分，因为它可以确保组件在任何环境中运行，即使其他 CSS 或 JavaScript 正在页面上运行。</p>
-  <a href="./shadowdom" class="button button-primary">Learn more</a>
+  <a href="./shadowdom" class="button button-primary">更多内容</a>
 </div>
 
 <div style="clear:both;"></div>
 
 <div class="attempt-left">
-  <h2><a href="./best-practices">Best Practices</a></h2>
+  <h2><a href="./best-practices">最佳实践</a></h2>
   <a href="./best-practices">
     <img width="48" src="https://github.com/google/WebFundamentals/blob/master/web/images/md-icons/ic_done_black_24px.svg?raw=true" class="attempt-right">
   </a>
   <p>由于自定义元素和 Shadow DOM 属于低级别原语，如何充分组合使用它们来创建可靠并且能在许多不同的环境中正常运行的组件并不总是十分清楚。而使用这些 API，您可以实现所有这些，下面是一些可以帮助您确保组件在任何地方都能正常运行的最佳实践。</p>
-  <a href="./best-practices" class="button button-primary">Learn more</a>
+  <a href="./best-practices" class="button button-primary">更多内容</a>
 </div>
 
 <div class="attempt-right">
@@ -51,11 +47,11 @@ the test of time?
     <img width="48" src="https://github.com/google/WebFundamentals/blob/master/web/images/md-icons/ic_explore_black_24px.svg?raw=true" class="attempt-right">
   </a>
   <p>HowTo-Components 是一组展示自定义元素和 Shadow DOM 最佳实践的元素。这些元素并不用于生产环境，而是作为教学助手来帮助将最佳实践建议映射到实际实现。</p>
-  <a href="./examples/" class="button button-primary">Learn more</a>
+  <a href="./examples/" class="button button-primary">更多内容</a>
 </div>
 
 <div style="clear:both;"></div>
 
-## Feedback {: #feedback }
+## 反馈 {: #feedback }
 
 {% include "web/_shared/helpful.html" %}