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/
Jan Schär committed
Apr 30, 2016 at 00:05 UTC
3d31361cfbe2ceb74a3f365515cd4a3298b021f9
2 files changed
+14
-1
src/renderers/dom/shared/ReactDOMComponent.js
+1
-1
@@ -592,7 +592,7 @@ ReactDOMComponent.Mixin = {
592
div.innerHTML = `<${type}></${type}>`;
593
el = div.removeChild(div.firstChild);
594
} else {
595
- el = ownerDocument.createElement(this._currentElement.type);
595
+ el = ownerDocument.createElement(this._currentElement.type, props.is || null);
596
}
597
} else {
598
el = ownerDocument.createElementNS(
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+13
@@ -15,6 +15,7 @@
15
describe('ReactDOMComponent', function() {
16
var React;
17
var ReactDOM;
18
+ var ReactDOMFeatureFlags;
19
var ReactDOMServer;
20
var inputValueTracking;
21
@@ -22,6 +23,7 @@ describe('ReactDOMComponent', function() {
23
jest.resetModuleRegistry();
24
React = require('React');
25
ReactDOM = require('ReactDOM');
26
+ ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
27
ReactDOMServer = require('ReactDOMServer');
28
inputValueTracking = require('inputValueTracking');
29
});
@@ -906,6 +908,17 @@ describe('ReactDOMComponent', function() {
908
'or use `props.dangerouslySetInnerHTML`. Check the render method of X.'
909
);
910
});
911
+
912
+ it('should support custom elements which extend native elements', function() {
913
+ if (ReactDOMFeatureFlags.useCreateElement) {
914
+ var container = document.createElement('div');
915
+ spyOn(document, 'createElement').andCallThrough();
916
+ ReactDOM.render(<div is="custom-div" />, container);
917
+ expect(document.createElement).toHaveBeenCalledWith('div', 'custom-div');
918
+ } else {
919
+ expect(ReactDOMServer.renderToString(<div is="custom-div" />)).toContain('is="custom-div"');
920
+ }
921
+ });
922
});
923
924
describe('updateComponent', function() {