From 55209c8cc954b2ec86e765cc27469190c74f1b5e Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 31 Aug 2017 18:24:23 -0700
Subject: [PATCH] Don't treat dashed SVG tags as custom elements (#10586)

---
 .../__tests__/ReactDOMComponent-test.js       |  2 +-
 .../ReactDOMServerIntegration-test.js         | 17 +++++----------
 .../dom/shared/utils/isCustomComponent.js     | 21 ++++++++++++++++++-
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
index b37e4e6479..206a74ba11 100644
--- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+++ b/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(
diff --git a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
index 4f8b327ad4..9016dad76c 100644
--- a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
+++ b/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" />);
diff --git a/src/renderers/dom/shared/utils/isCustomComponent.js b/src/renderers/dom/shared/utils/isCustomComponent.js
index 0d730a877e..3beba018a2 100644
--- a/src/renderers/dom/shared/utils/isCustomComponent.js
+++ b/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;