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..e21fc266ebf
--- /dev/null
+++ b/src/content/zh-cn/fundamentals/web-components/index.md
@@ -0,0 +1,57 @@
+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 }
+
+组件是现代Web应用程序的基础。 当您在构建自己的组件时，您应该遵循哪些实践，以经得起时间的考验？
+
+<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">更多内容</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">更多内容</a>
+</div>
+
+<div style="clear:both;"></div>
+
+<div class="attempt-left">
+  <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">更多内容</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">更多内容</a>
+</div>
+
+<div style="clear:both;"></div>
+
+## 反馈 {: #feedback }
+
+{% include "web/_shared/helpful.html" %}