Don't treat dashed SVG tags as custom elements (#10586)

Author: gaearon

src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js

@@ -2274,7 +2274,7 @@ describe('ReactDOMComponent', () => {
     // This is currently broken (and has been broken for a while).
     // We had a fix based on reading namespace, but it was too convoluted.
     // TODO: a proper fix that would happen at the diffing stage.
-    describe.skip('Hyphenated SVG elements', function() {
+    describe('Hyphenated SVG elements', function() {
       it('the font-face element is not a custom element', function() {
         spyOn(console, 'error');
         var el = ReactTestUtils.renderIntoDocument(

src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js

@@ -965,18 +965,11 @@ describe('ReactDOMServerIntegration', () => {
         },
       );
 
-      // This is currently broken (and has been broken for a while).
-      // We had a fix based on reading namespace, but it was too convoluted.
-      // TODO: a proper fix that would happen at the diffing stage.
-      //
-      // itRenders(
-      //   'known SVG attributes for elements with dashes in tag',
-      //   async render => {
-      //     const e = await render(<svg><font-face accentHeight={10} /></svg>);
-      //     expect(e.firstChild.hasAttribute('accentHeight')).toBe(false);
-      //     expect(e.firstChild.getAttribute('accent-height')).toBe('10');
-      //   },
-      // );
+      itRenders('SVG tags with dashes in them', async render => {
+        const e = await render(<svg><font-face accentHeight={10} /></svg>);
+        expect(e.firstChild.hasAttribute('accentHeight')).toBe(false);
+        expect(e.firstChild.getAttribute('accent-height')).toBe('10');
+      });
 
       itRenders('cased custom attributes', async render => {
         const e = await render(<div fooBar="test" />);

src/renderers/dom/shared/utils/isCustomComponent.js

@@ -13,7 +13,26 @@
 'use strict';
 
 function isCustomComponent(tagName: string, props: Object) {
-  return tagName.indexOf('-') >= 0 || typeof props.is === 'string';
+  if (tagName.indexOf('-') === -1) {
+    return typeof props.is === 'string';
+  }
+  switch (tagName) {
+    // These are reserved SVG and MathML elements.
+    // We don't mind this whitelist too much because we expect it to never grow.
+    // The alternative is to track the namespace in a few places which is convoluted.
+    // https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
+    case 'annotation-xml':
+    case 'color-profile':
+    case 'font-face':
+    case 'font-face-src':
+    case 'font-face-uri':
+    case 'font-face-format':
+    case 'font-face-name':
+    case 'missing-glyph':
+      return false;
+    default:
+      return true;
+  }
 }
 
 module.exports = isCustomComponent;