Allow custom elements extending native ones

...by passing the `is` attribute as the second param to `createElement`. See http://webcomponents.org/polyfills/custom-elements/
facebook · Apr 21, 2016 · 3ab514f · 3ab514f
1 parent b7a2409
commit 3ab514f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/renderers/dom/shared/ReactDOMComponent.js b/src/renderers/dom/shared/ReactDOMComponent.js
@@ -576,7 +576,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
@@ -906,6 +906,13 @@ describe('ReactDOMComponent', function() {
         'or use `props.dangerouslySetInnerHTML`. Check the render method of X.'
       );
     });
+
+    it('should support custom elements which extend native elements', function() {
+      var container = document.createElement('div');
+      spyOn(document, 'createElement').andCallThrough();
+      ReactDOM.render(<div is="custom-div" />, container);
+      expect(document.createElement).toHaveBeenCalledWith('div', 'custom-div');
+    });
   });
 
   describe('updateComponent', function() {