Merge pull request #3752 from jhicken/Custom-Element-Support

Ignore whitelisted attributes for native custom elements.
facebook · Jun 10, 2015 · 537a841 · 537a841
2 parents 46cec19 + 7256f09
commit 537a841
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/renderers/dom/shared/ReactDOMComponent.js b/src/renderers/dom/shared/ReactDOMComponent.js
@@ -296,6 +296,10 @@ function processChildContext(context, inst) {
   return context;
 }
 
+function isCustomComponent(tagName, props) {
+  return tagName.indexOf('-') >= 0 || props.is != null;
+}
+
 /**
  * Creates a new React class that is idempotent and capable of containing other
  * React components. It accepts event listeners and DOM properties that are
@@ -446,7 +450,7 @@ ReactDOMComponent.Mixin = {
           propValue = CSSPropertyOperations.createMarkupForStyles(propValue);
         }
         var markup = null;
-        if (this._tag != null && this._tag.indexOf('-') >= 0) {
+        if (this._tag != null && isCustomComponent(this._tag, props)) {
           markup = DOMPropertyOperations.createMarkupForCustomAttribute(propKey, propValue);
         } else {
           markup = DOMPropertyOperations.createMarkupForProperty(propKey, propValue);
@@ -686,7 +690,7 @@ ReactDOMComponent.Mixin = {
         } else if (lastProp) {
           deleteListener(this._rootNodeID, propKey);
         }
-      } else if (this._tag.indexOf('-') >= 0) {
+      } else if (isCustomComponent(this._tag, nextProps)) {
         BackendIDOperations.updateAttributeByID(
           this._rootNodeID,
           propKey,

diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
@@ -331,6 +331,12 @@ describe('ReactDOMComponent', function() {
       React.render(<div />, container);
       expect(nodeValueSetter.mock.calls.length).toBe(1);
     });
+
+    it('should ignore attribute whitelist for elements with the "is: attribute', function() {
+      var container = document.createElement('div');
+      React.render(<button is="test" cowabunga="chevynova"/>, container);
+      expect(container.firstChild.hasAttribute('cowabunga')).toBe(true);
+    });
   });
 
   describe('createOpenTagMarkup', function() {