diff --git a/src/renderers/dom/shared/ReactDOMComponent.js b/src/renderers/dom/shared/ReactDOMComponent.js index a9b30e1ca8..fc78b57422 100644 --- a/src/renderers/dom/shared/ReactDOMComponent.js +++ b/src/renderers/dom/shared/ReactDOMComponent.js @@ -592,7 +592,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 36dba2bdd2..703f3cab76 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js +++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js @@ -15,6 +15,7 @@ describe('ReactDOMComponent', function() { var React; var ReactDOM; + var ReactDOMFeatureFlags; var ReactDOMServer; var inputValueTracking; @@ -22,6 +23,7 @@ describe('ReactDOMComponent', function() { jest.resetModuleRegistry(); React = require('React'); ReactDOM = require('ReactDOM'); + ReactDOMFeatureFlags = require('ReactDOMFeatureFlags'); ReactDOMServer = require('ReactDOMServer'); inputValueTracking = require('inputValueTracking'); }); @@ -906,6 +908,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() {