Fix rendering into shadow root

fixtures/dom/src/components/Header.js

@@ -62,6 +62,7 @@ class Header extends React.Component {
                 <option value="/date-inputs">Date Inputs</option>
                 <option value="/error-handling">Error Handling</option>
                 <option value="/event-pooling">Event Pooling</option>
+                <option value="/custom-elements">Custom Elements</option>
               </select>
             </label>
             <label htmlFor="react_version">

fixtures/dom/src/components/fixtures/custom-elements/index.js

@@ -0,0 +1,47 @@
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+
+const React = window.React;
+const ReactDOM = window.ReactDOM;
+
+class HelloWorld extends React.Component {
+  render() {
+    return <h1>Hello, world!</h1>;
+  }
+}
+
+// Babel breaks web components.
+// https://github.com/w3c/webcomponents/issues/587
+// eslint-disable-next-line no-new-func
+const MyElement = new Function(
+  'React',
+  'ReactDOM',
+  'HelloWorld',
+  `
+return class MyElement extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({ mode:'open' });
+    ReactDOM.render(React.createElement(HelloWorld), shadowRoot);
+  }
+}`
+)(React, ReactDOM, HelloWorld);
+
+customElements.define('my-element', MyElement);
+
+export default class ButtonTestCases extends React.Component {
+  render() {
+    return (
+      <FixtureSet
+        title="Custom Elements"
+        description="Support for Custom Element DOM standards.">
+        <TestCase title="Rendering into shadow root">
+          <TestCase.ExpectedResult>
+            You should see "Hello, World" printed below.{' '}
+          </TestCase.ExpectedResult>
+          <my-element />
+        </TestCase>
+      </FixtureSet>
+    );
+  }
+}

fixtures/dom/src/components/fixtures/index.js

@@ -9,6 +9,7 @@ import ButtonFixtures from './buttons';
 import DateInputFixtures from './date-inputs';
 import ErrorHandling from './error-handling';
 import EventPooling from './event-pooling';
+import CustomElementFixtures from './custom-elements';
 
 const React = window.React;
 
@@ -40,6 +41,8 @@ function FixturesPage() {
       return <ErrorHandling />;
     case '/event-pooling':
       return <EventPooling />;
+    case '/custom-elements':
+      return <CustomElementFixtures />;
     default:
       return <p>Please select a test fixture.</p>;
   }