docs(cn): translate docs/web-components into Chinese

content/docs/web-components.md

@@ -1,16 +1,16 @@
 ---
 id: web-components
-title: Web Components
+title: Web Component
 permalink: docs/web-components.html
 redirect_from:
   - "docs/webcomponents.html"
 ---
 
-React and [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) are built to solve different problems.  Web Components provide strong encapsulation for reusable components, while React provides a declarative library that keeps the DOM in sync with your data. The two goals are complementary. As a developer, you are free to use React in your Web Components, or to use Web Components in React, or both.
+React 和 [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) 为了解决不同的问题而构建。Web Component 为解决可复用组件提供了强大的封装，而 React 的提供了声明式库，使 DOM 和你的数据保持同步。作为开发人员，你可以在 Web Component 自由的使用 React，或者在 React 中使用 Web Component，或者两者都存在。
 
-Most people who use React don't use Web Components, but you may want to, especially if you are using third-party UI components that are written using Web Components.
+大多数使用 React 时不使用 Web Component，但可能你需要使用，尤其是在使用 Web Component 编写的第三方库时。
 
-## Using Web Components in React {#using-web-components-in-react}
+## 在 React 中使用 Web Component {#using-web-components-in-react}
 
 ```javascript
 class HelloMessage extends React.Component {
@@ -20,14 +20,14 @@ class HelloMessage extends React.Component {
 }
 ```
 
-> Note:
+> 注意：
 >
-> Web Components often expose an imperative API. For instance, a `video` Web Component might expose `play()` and `pause()` functions. To access the imperative APIs of a Web Component, you will need to use a ref to interact with the DOM node directly. If you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component.
+> Web Component 通常暴露的是命令式 API。例如，Web Component 组件 `video` 可能公开 `play()` 和 `pause()` 方法。要访问 Web Component 的命令式 API，你需要使用 `ref` 直接与 DOM 节点进行交互。如果你使用的是第三方 Web Components，那么最好的解决方案是编写一个 React 组件去包装 Web Component。
 >
-> Events emitted by a Web Component may not properly propagate through a React render tree.
-> You will need to manually attach event handlers to handle these events within your React components.
+> Web Component 触发的事件可能无法通过 React 渲染树正确的传播。
+> 你需要手动添加事件处理程序以在 React 组件中处理这些事件。
 
-One common confusion is that Web Components use "class" instead of "className".
+一个常见的混淆是 Web Component 使用的是 `class` 而不是 `className`。
 
 ```javascript
 function BrickFlipbox() {
@@ -40,7 +40,7 @@ function BrickFlipbox() {
 }
 ```
 
-## Using React in your Web Components {#using-react-in-your-web-components}
+## 在 Web Component 中使用 React  {#using-react-in-your-web-components}
 
 ```javascript
 class XSearch extends HTMLElement {
@@ -56,7 +56,7 @@ class XSearch extends HTMLElement {
 customElements.define('x-search', XSearch);
 ```
 
->Note:
+>注意：
 >
->This code **will not** work if you transform classes with Babel. See [this issue](https://github.com/w3c/webcomponents/issues/587) for the discussion.
->Include the [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) before you load your web components to fix this issue.
+>如果使用 Babel 来转换 class，此代码将**不会**起作用。请查看[此问题](https://github.com/w3c/webcomponents/issues/587)了解相关讨论。
+>在加载 web component 前请包含[custom-elements-es5-adapter.js](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) 来解决此问题。