Skip to content
This repository has been archived by the owner on Aug 10, 2022. It is now read-only.

[ZH-CN] Translate web-components/index.md into Chinese #8809

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[ZH-CN] Translate web-components/index.md into Chinese #8809

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8a7a19c
Translate index.md via GitLocalize
liangzdz Jun 19, 2020
83f62eb
Translate index.md via GitLocalize
limhenry Jun 19, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
57 changes: 57 additions & 0 deletions src/content/zh-cn/fundamentals/web-components/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do not link to Git repo images, link to them via their original URL please.

</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" %}