From bce6bc54c2e2b4cf1dc0fb7d633c203f6b9013d6 Mon Sep 17 00:00:00 2001
From: rektide <rektide@voodoowarez.com>
Date: Fri, 30 Dec 2016 02:19:58 -0500
Subject: [PATCH 1/3] Resolve #8656 WebComponent support for modern browsers.

This is a straightforward update of the WebComponent example to match the final 1.0 specification. To meet 1.0 spec, class syntax must be used.
I'm unsure of any paths forward to maintaing support for old browsers while also supporting new ones, short of feature detection & having two codepaths.
---
 examples/webcomponents/index.html | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/examples/webcomponents/index.html b/examples/webcomponents/index.html
index 7eccc805bf871..ed93314f643af 100644
--- a/examples/webcomponents/index.html
+++ b/examples/webcomponents/index.html
@@ -36,19 +36,18 @@ <h4>Example Details</h4>
     <script type="text/babel">
 
       // Define WebComponent
-      var proto = Object.create(HTMLElement.prototype, {
-        attachedCallback: {
-          value: function() {
-            var mountPoint = document.createElement('span');
-            this.createShadowRoot().appendChild(mountPoint);
+      class XSearch extends HTMLElement {
+        constructor() {
+          super();
+          var mountPoint = document.createElement('span');
+          this.attachShadow({mode: 'open'}).appendChild(mountPoint);
 
-            var name = this.getAttribute('name');
-            var url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
-            ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
-          }
+          var name = this.getAttribute('name');
+          var 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);
 
       // Define React Component
       class HelloMessage extends React.Component {

From e912b6cb60ba592f1f6c9135645e18943c873f1e Mon Sep 17 00:00:00 2001
From: rektide <rektide@voodoowarez.com>
Date: Fri, 30 Dec 2016 02:34:01 -0500
Subject: [PATCH 2/3] Update to custom-elements 1.0.0-alpha.3 polyfill.

---
 examples/webcomponents/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/webcomponents/index.html b/examples/webcomponents/index.html
index ed93314f643af..bd0741c39ce8a 100644
--- a/examples/webcomponents/index.html
+++ b/examples/webcomponents/index.html
@@ -28,7 +28,7 @@ <h4>Example Details</h4>
       Learn more about React at
       <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
     </p>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.21/webcomponents.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.0.0-alpha.3/custom-elements.min.js"></script>
     <script src="../../build/react.js"></script>
     <script src="../../build/react-dom.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

From 3bb5dfaf4aa2ba07814cce7d30108ecaf144744f Mon Sep 17 00:00:00 2001
From: rektide <rektide@voodoowarez.com>
Date: Fri, 30 Dec 2016 02:46:13 -0500
Subject: [PATCH 3/3] Update Web Component docs.

And lint a ; that followed examples/webcomponent's class XSearch.
---
 docs/docs/web-components.md       | 22 ++++++++++------------
 examples/webcomponents/index.html |  2 +-
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/docs/docs/web-components.md b/docs/docs/web-components.md
index 4063db0e1ca15..27d421bf61265 100644
--- a/docs/docs/web-components.md
+++ b/docs/docs/web-components.md
@@ -42,19 +42,17 @@ 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 extends HTMLElement.prototype {
+  constructor() {
+    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);
 ```
 
 You can also check out this [complete Web Components example on GitHub](https://github.com/facebook/react/tree/master/examples/webcomponents).
diff --git a/examples/webcomponents/index.html b/examples/webcomponents/index.html
index bd0741c39ce8a..6156748591be8 100644
--- a/examples/webcomponents/index.html
+++ b/examples/webcomponents/index.html
@@ -46,7 +46,7 @@ <h4>Example Details</h4>
           var url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
           ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
         }
-      };
+      }
       customElements.define('x-search', XSearch);
 
       // Define React Component