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(
, container); + expect(document.createElement).toHaveBeenCalledWith('div', 'custom-div'); + } else { + expect(ReactDOMServer.renderToString()).toContain('is="custom-div"'); + } + }); }); describe('updateComponent', function() {