diff --git a/src/renderers/dom/shared/ReactDOMComponent.js b/src/renderers/dom/shared/ReactDOMComponent.js index 5854afcba4fbc..75f404a1bd9dc 100644 --- a/src/renderers/dom/shared/ReactDOMComponent.js +++ b/src/renderers/dom/shared/ReactDOMComponent.js @@ -53,6 +53,7 @@ var registrationNameModules = EventPluginRegistry.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}); var HTML = keyOf({__html: null}); @@ -744,7 +745,9 @@ ReactDOMComponent.Mixin = { } var markup = null; if (this._tag != null && isCustomComponent(this._tag, props)) { - markup = DOMPropertyOperations.createMarkupForCustomAttribute(propKey, propValue); + if (propKey !== CHILDREN) { + markup = DOMPropertyOperations.createMarkupForCustomAttribute(propKey, propValue); + } } else { markup = DOMPropertyOperations.createMarkupForProperty(propKey, propValue); } @@ -1015,6 +1018,9 @@ ReactDOMComponent.Mixin = { deleteListener(this._rootNodeID, propKey); } } else if (isCustomComponent(this._tag, nextProps)) { + if (propKey === CHILDREN) { + 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 a477d5e42d03d..5d2999f7deefe 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js +++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js @@ -237,6 +237,18 @@ 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(, container); + expect(container.firstChild.hasAttribute('children')).toBe(false); + + // Test updates to null + ReactDOM.render(, container); + expect(container.firstChild.hasAttribute('children')).toBe(false); + }); + it('should remove attributes', function() { var container = document.createElement('div'); ReactDOM.render(, container);