mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
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:
committed by
Paul O’Shannessy
parent
c1e3f7ec14
commit
3d31361cfb
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user