You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
2.5 KiB
63 lines
2.5 KiB
8 years ago
|
---
|
||
|
id: web-components
|
||
|
title: Web Components
|
||
|
permalink: docs/web-components.html
|
||
8 years ago
|
redirect_from: "docs/webcomponents.html"
|
||
8 years ago
|
---
|
||
|
|
||
|
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.
|
||
|
|
||
|
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.
|
||
|
|
||
|
## Using Web Components in React
|
||
|
|
||
|
```javascript
|
||
|
class HelloMessage extends React.Component {
|
||
|
render() {
|
||
|
return <div>Hello <x-search>{this.props.name}</x-search>!</div>;
|
||
|
}
|
||
|
}
|
||
|
```
|
||
|
|
||
|
> Note:
|
||
|
>
|
||
8 years ago
|
> 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.
|
||
8 years ago
|
>
|
||
|
> 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.
|
||
|
|
||
|
One common confusion is that Web Components use "class" instead of "className".
|
||
|
|
||
|
```javascript
|
||
|
function BrickFlipbox() {
|
||
|
return (
|
||
8 years ago
|
<brick-flipbox class="demo">
|
||
8 years ago
|
<div>front</div>
|
||
|
<div>back</div>
|
||
|
</brick-flipbox>
|
||
|
);
|
||
|
}
|
||
|
```
|
||
|
|
||
|
## Using React in your Web Components
|
||
|
|
||
7 years ago
|
Similarly, you can call `ReactDOM.render()` from inside a web component:
|
||
|
|
||
8 years ago
|
```javascript
|
||
7 years ago
|
class XSearch extends HTMLElement {
|
||
7 years ago
|
connectedCallback() {
|
||
|
const mountPoint = document.createElement('span');
|
||
|
this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
|
||
|
|
||
|
const name = this.getAttribute('name');
|
||
|
const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
|
||
|
ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
|
||
8 years ago
|
}
|
||
7 years ago
|
}
|
||
|
customElements.define('x-search', XSearch);
|
||
8 years ago
|
```
|
||
7 years ago
|
|
||
|
>Note:
|
||
|
>
|
||
|
>This code will **not** work if compiled with Babel [due to an intentional limitation in the specification](https://github.com/w3c/webcomponents/issues/587). It will only work if you use the `class` syntax directly in the browser without compiling the code first.
|