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/
This commit is contained in:
Jan Schär
2016-04-29 15:05:33 -07:00
committed by Paul O’Shannessy
parent c1e3f7ec14
commit 3d31361cfb
2 changed files with 14 additions and 1 deletions
@@ -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(
@@ -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(<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() {