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/

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(

src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js

@@ -15,13 +15,15 @@
 describe('ReactDOMComponent', function() {
  var React;
  var ReactDOM;
+ var ReactDOMFeatureFlags;
  var ReactDOMServer;
  var inputValueTracking;
 
  beforeEach(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(<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() {