Update web-component docs to current standard (#11020)
The documentation example for Web Components uses deprecated Custom Element and Shadow DOM APIs [0]. This change updates the example to the v1 APIs, which are the current standard. [0] https://developers.google.com/web/fundamentals/web-components/customelements#historysupport
Goffert van Gool committed
Oct 2, 2017 at 12:44 UTC
4c855cce0bec7a612ba68d41ebce2df201137837
1 file changed
+10
-12
docs/docs/web-components.md
+10
-12
@@ -42,17 +42,15 @@ function BrickFlipbox() {
42
## Using React in your Web Components
43
44
```javascript
45
-const proto = Object.create(HTMLElement.prototype, {
46
- attachedCallback: {
47
- value: function() {
48
- const mountPoint = document.createElement('span');
49
- this.createShadowRoot().appendChild(mountPoint);
50
-
51
- const name = this.getAttribute('name');
52
- const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
53
- ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
54
- }
45
+class XSearch {
46
+ connectedCallback() {
47
+ const mountPoint = document.createElement('span');
48
+ this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
49
+
50
+ const name = this.getAttribute('name');
51
+ const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
52
+ ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
53
}
56
-});
57
-document.registerElement('x-search', {prototype: proto});
54
+}
55
+customElements.define('x-search', XSearch);
56
```