From b0deadc05db767b1229daf29160ff7f73d1c73f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Sch=C3=A4r?= <jscissr@gmail.com>
Date: Sat, 30 Apr 2016 00:05:33 +0200
Subject: [PATCH] Allow custom elements extending native ones (#6570)

...by passing the `is` attribute as the second param to `createElement`.
See http://webcomponents.org/polyfills/custom-elements/
(cherry picked from commit 3d31361cfbe2ceb74a3f365515cd4a3298b021f9)
---
 src/renderers/dom/shared/ReactDOMComponent.js       |  2 +-
 .../dom/shared/__tests__/ReactDOMComponent-test.js  | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/renderers/dom/shared/ReactDOMComponent.js b/src/renderers/dom/shared/ReactDOMComponent.js
index 445c9d8170545..c7c8a0c747ef4 100644
--- a/src/renderers/dom/shared/ReactDOMComponent.js
+++ b/src/renderers/dom/shared/ReactDOMComponent.js
@@ -569,7 +569,7 @@ ReactDOMComponent.Mixin = {
           div.innerHTML = `<${type}></${type}>`;
           el = div.removeChild(div.firstChild);
         } else {
-          el = ownerDocument.createElement(this._currentElement.type);
+          el = ownerDocument.createElement(this._currentElement.type, props.is || null);
         }
       } else {
         el = ownerDocument.createElementNS(
diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
index d009ed80d0440..e7d6765e6bede 100644
--- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
@@ -15,12 +15,14 @@
 describe('ReactDOMComponent', function() {
   var React;
   var ReactDOM;
+  var ReactDOMFeatureFlags;
   var ReactDOMServer;
 
   beforeEach(function() {
     jest.resetModuleRegistry();
     React = require('React');
     ReactDOM = require('ReactDOM');
+    ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
     ReactDOMServer = require('ReactDOMServer');
   });
 
@@ -886,6 +888,17 @@ describe('ReactDOMComponent', function() {
         'or use `props.dangerouslySetInnerHTML`. Check the render method of X.'
       );
     });
+
+    it('should support custom elements which extend native elements', function() {
+      if (ReactDOMFeatureFlags.useCreateElement) {
+        var container = document.createElement('div');
+        spyOn(document, 'createElement').andCallThrough();
+        ReactDOM.render(<div is="custom-div" />, container);
+        expect(document.createElement).toHaveBeenCalledWith('div', 'custom-div');
+      } else {
+        expect(ReactDOMServer.renderToString(<div is="custom-div" />)).toContain('is="custom-div"');
+      }
+    });
   });
 
   describe('updateComponent', function() {