Translate Web Components page

content/docs/web-components.md

@@ -1,46 +1,46 @@
 ---
 id: web-components
-title: Web Components
+title: Componentes Web
 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 e [Componentes Web](https://developer.mozilla.org/pt-BR/docs/Web/Web_Components) são construídos para resolver problemas diferentes. Componentes Web fornecem forte encapsulamento para componentes reutilizáveis. Enquanto que o React fornece uma biblioteca declarativa que mantém o DOM em sincronia com os seus dados. Os dois objetivos são complementares. Como um desenvolvedor, você é livre para usar o React nos seus Componentes Web ou usar Componentes Web no React ou ambos.
 
-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.
+A maioria das pessoas que usam o React não usam Componentes Web. Mas, talvez você queira, especialmente se você estiver utilizando componentes de UI de terceiros que foram escritos utilizando Componentes Web.
 
-## Using Web Components in React {#using-web-components-in-react}
+## Usando Componentes Web no React {#usando-componentes-web-no-react}
 
 ```javascript
 class HelloMessage extends React.Component {
   render() {
-    return <div>Hello <x-search>{this.props.name}</x-search>!</div>;
+    return <div>Olá <x-search>{this.props.name}</x-search>!</div>;
   }
 }
 ```
 
-> Note:
+> Nota:
 >
-> 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.
+> Componentes Web geralmente expõem uma API imperativa. Por exemplo, um Componente Web `video` pode expor as funções `play()` e `pause()`. Para acessar as APIs imperativas de um Componente Web, você precisará usar um ref para interagir diretamente com o nó do DOM. Se você está utilizando Componentes Web de terceiros, a melhor solução é escrever um componente React que se comporte como um wrapper para o seu Componente Web.
 >
-> 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.
+> Os eventos emitidos por um Componente Web podem não se propagar apropriadamente através da árvore de renderização do React.
+> Você precisará anexar manualmente os manipuladores de eventos para lidar com esses eventos em seus componentes React.
 
-One common confusion is that Web Components use "class" instead of "className".
+Uma confusão comum é que os Componentes Web utilizam "class" ao invés de "className".
 
 ```javascript
 function BrickFlipbox() {
   return (
     <brick-flipbox class="demo">
-      <div>front</div>
-      <div>back</div>
+      <div>frente</div>
+      <div>verso</div>
     </brick-flipbox>
   );
 }
 ```
 
-## Using React in your Web Components {#using-react-in-your-web-components}
+## Usando React nos seus Componentes Web {#usando-react-nos-seus-componentes-web}
 
 ```javascript
 class XSearch extends HTMLElement {
@@ -56,7 +56,7 @@ class XSearch extends HTMLElement {
 customElements.define('x-search', XSearch);
 ```
 
->Note:
+>Nota:
 >
->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.
+>Este código **não funcionará** se você transformar as classes com o Babel. Veja a discussão [nesta issue](https://github.com/w3c/webcomponents/issues/587).
+>Inclua o [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) antes de carregar seus componentes web para resolver este problema.