From 358674714c37f79c1f25f9aeae41a67df0f31929 Mon Sep 17 00:00:00 2001
From: Goffert van Gool <ruphin@ruphin.net>
Date: Mon, 2 Oct 2017 12:44:57 +0200
Subject: [PATCH] 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
---
 docs/web-components.md | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/docs/web-components.md b/docs/web-components.md
index 1012ea79..0cdc057e 100644
--- a/docs/web-components.md
+++ b/docs/web-components.md
@@ -42,17 +42,15 @@ function BrickFlipbox() {
 ## Using React in your Web Components
 
 ```javascript
-const proto = Object.create(HTMLElement.prototype, {
-  attachedCallback: {
-    value: function() {
-      const mountPoint = document.createElement('span');
-      this.createShadowRoot().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);
-    }
+class XSearch {
+  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);
   }
-});
-document.registerElement('x-search', {prototype: proto});
+}
+customElements.define('x-search', XSearch);
 ```