From 76b625ba80512ccfa077fb3119183d19cea8edde Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 4 Oct 2017 17:12:36 +0100
Subject: [PATCH] Fixes example in Web Components docs (#11039)

* fixes docs on webcomponent

* Update web-components.md
---
 docs/web-components.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/docs/web-components.md b/docs/web-components.md
index 0cdc057e6..853eb91ca 100644
--- a/docs/web-components.md
+++ b/docs/web-components.md
@@ -41,8 +41,10 @@ function BrickFlipbox() {
 
 ## Using React in your Web Components
 
+Similarly, you can call `ReactDOM.render()` from inside a web component:
+
 ```javascript
-class XSearch {
+class XSearch extends HTMLElement {
   connectedCallback() {
     const mountPoint = document.createElement('span');
     this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
@@ -54,3 +56,7 @@ class XSearch {
 }
 customElements.define('x-search', XSearch);
 ```
+
+>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.