From f12fd6b5ae9031d50bd9ea4456103f7039474e5c Mon Sep 17 00:00:00 2001
From: Jim <jsfb@github>
Date: Thu, 8 Oct 2015 10:07:29 -0700
Subject: [PATCH] Should not coerce children prop on custom elements to a
 string.  Fixes #5088

---
 src/renderers/dom/shared/ReactDOMComponent.js  | 10 ++++++++--
 .../shared/__tests__/ReactDOMComponent-test.js | 18 ++++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/renderers/dom/shared/ReactDOMComponent.js b/src/renderers/dom/shared/ReactDOMComponent.js
index 827f06d945c94c..badc2311394a81 100644
--- a/src/renderers/dom/shared/ReactDOMComponent.js
+++ b/src/renderers/dom/shared/ReactDOMComponent.js
@@ -49,6 +49,7 @@ var registrationNameModules = ReactBrowserEventEmitter.registrationNameModules;
 
 // For quickly matching children type, to test if can be treated as content.
 var CONTENT_TYPES = {'string': true, 'number': true};
+var CHILDREN = keyOf({children: null});
 
 var STYLE = keyOf({style: null});
 
@@ -688,9 +689,11 @@ ReactDOMComponent.Mixin = {
           }
           propValue = CSSPropertyOperations.createMarkupForStyles(propValue);
         }
-        var markup = null;
+        var markup = '';
         if (this._tag != null && isCustomComponent(this._tag, props)) {
-          markup = DOMPropertyOperations.createMarkupForCustomAttribute(propKey, propValue);
+          if (propKey != CHILDREN || typeof propValue === 'string' || typeof propValue === 'number') {
+            markup = DOMPropertyOperations.createMarkupForCustomAttribute(propKey, propValue);
+          }
         } else {
           markup = DOMPropertyOperations.createMarkupForProperty(propKey, propValue);
         }
@@ -970,6 +973,9 @@ ReactDOMComponent.Mixin = {
           deleteListener(this._rootNodeID, propKey);
         }
       } else if (isCustomComponent(this._tag, nextProps)) {
+        if (propKey == 'children' && typeof nextProp !== 'string' && typeof nextProp !== 'number') {
+          nextProp = null;
+        }
         DOMPropertyOperations.setValueForAttribute(
           getNode(this),
           propKey,
diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
index 992a0abe006752..66478a6761f0cf 100644
--- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
@@ -198,6 +198,24 @@ describe('ReactDOMComponent', function() {
       expect(stubStyle.display).toEqual('');
     });
 
+    it('should skip child object attribute on web components', function() {
+      var container = document.createElement('div');
+
+      // Test intial render to null
+      ReactDOM.render(<my-component children={['foo']} />, container);
+      expect(container.firstChild.hasAttribute('children')).toBe(false);
+
+      ReactDOM.render(<my-component children={'foo'} />, container);
+      expect(container.firstChild.hasAttribute('children')).toBe(true);
+
+      ReactDOM.render(<my-component children={5} />, container);
+      expect(container.firstChild.hasAttribute('children')).toBe(true);
+
+      // Test updates to null
+      ReactDOM.render(<my-component children={['foo']} />, container);
+      expect(container.firstChild.hasAttribute('children')).toBe(false);
+    });
+
     it('should remove attributes', function() {
       var container = document.createElement('div');
       ReactDOM.render(<img height="17" />, container);