diff --git a/docs/web-components.md b/docs/web-components.md
index 0cdc057e..853eb91c 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.