Update web-components.md

content/docs/web-components.md

@@ -6,9 +6,9 @@ redirect_from:
   - "docs/webcomponents.html"
 ---
 
-React 和 [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) 为了解决不同的问题而生。Web Components 为解决可复用组件提供了强大的封装，而 React 的提供了声明式库，使 DOM 和你的数据保持同步。这两个目标是互补的。作为开发人员，你可以自由的选择在 Web Component 中使用 React，或者在 React 中使用 Web Component，或者两者都存在。
+React 和 [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) 为了解决不同的问题而生。Web Components 为可复用组件提供了强大的封装，而 React 则提供了声明式的解决方案，使 DOM 与数据保持同步。两者旨在互补。作为开发人员，可以自由选择在 Web Components 中使用 React，或者在 React 中使用 Web Components，或者两者共存。
 
-大多数人使用 React 时不使用 Web Components，但可能你需要使用，尤其是在使用 Web Components 编写的第三方 UI 组件时。
+大多数开发者在使用 React 时，不使用 Web Components，但可能你会需要使用，尤其是在使用 Web Components 编写的第三方 UI 组件时。
 
 ## 在 React 中使用 Web Components {#using-web-components-in-react}
 
@@ -22,12 +22,12 @@ class HelloMessage extends React.Component {
 
 > 注意：
 >
-> Web Components 通常暴露的是命令式 API。例如，Web Components 组件 `video` 可能公开 `play()` 和 `pause()` 方法。要访问 Web Components 的命令式 API，你需要使用 `ref` 直接与 DOM 节点进行交互。如果你使用的是第三方 Web Components，那么最好的解决方案是编写一个 React 组件去包装 Web Components。
+> Web Components 通常暴露的是命令式 API。例如，Web Components 的组件 `video` 可能会公开 `play()` 和 `pause()` 方法。要访问 Web Components 的命令式 API，你需要使用 `ref` 直接与 DOM 节点进行交互。如果你使用的是第三方 Web Components，那么最好的解决方案是编写 React 组件包装该 Web Components。
 >
-> Web Components 触发的事件可能无法通过 React 渲染树正确的传播。
-> 你需要在你的 React 组件中手动添加事件处理程序来处理这些事件。
+> Web Components 触发的事件可能无法通过 React 渲染树正确的传递。
+> 你需要在 React 组件中手动添加事件处理器来处理这些事件。
 
-一个常见的混淆是 Web Components 使用的是 `class` 而不是 `className`。
+常见的误区是在 Web Components 中使用的是 `class` 而非 `className`。
 
 ```javascript
 function BrickFlipbox() {
@@ -56,7 +56,7 @@ class XSearch extends HTMLElement {
 customElements.define('x-search', XSearch);
 ```
 
->注意：
+> 注意：
 >
->如果使用 Babel 来转换 class，此代码将**不会**起作用。请查阅该 [issue](https://github.com/w3c/webcomponents/issues/587) 了解相关讨论。
->在加载 Web Components 前请包含 [custom-elements-es5-adapter.js](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) 来解决此问题。
+> 如果使用 Babel 来转换 class，此代码将**不会**起作用。请查阅该 [issue](https://github.com/w3c/webcomponents/issues/587) 了解相关讨论。
+> 在加载 Web Components 前请引入 [custom-elements-es5-adapter.js](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) 来解决该 issue。