Don't treat dashed SVG tags as custom elements (#10586)
Dan Abramov committed
Aug 31, 2017 at 18:24 UTC
55209c8cc954b2ec86e765cc27469190c74f1b5e
3 files changed
+26
-14
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+1
-1
@@ -2274,7 +2274,7 @@ describe('ReactDOMComponent', () => {
2274
// This is currently broken (and has been broken for a while).
2275
// We had a fix based on reading namespace, but it was too convoluted.
2276
// TODO: a proper fix that would happen at the diffing stage.
2277
- describe.skip('Hyphenated SVG elements', function() {
2277
+ describe('Hyphenated SVG elements', function() {
2278
it('the font-face element is not a custom element', function() {
2279
spyOn(console, 'error');
2280
var el = ReactTestUtils.renderIntoDocument(
src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
+5
-12
@@ -965,18 +965,11 @@ describe('ReactDOMServerIntegration', () => {
965
},
966
);
967
968
- // This is currently broken (and has been broken for a while).
969
- // We had a fix based on reading namespace, but it was too convoluted.
970
- // TODO: a proper fix that would happen at the diffing stage.
971
- //
972
- // itRenders(
973
- // 'known SVG attributes for elements with dashes in tag',
974
- // async render => {
975
- // const e = await render(<svg><font-face accentHeight={10} /></svg>);
976
- // expect(e.firstChild.hasAttribute('accentHeight')).toBe(false);
977
- // expect(e.firstChild.getAttribute('accent-height')).toBe('10');
978
- // },
979
- // );
968
+ itRenders('SVG tags with dashes in them', async render => {
969
+ const e = await render(<svg><font-face accentHeight={10} /></svg>);
970
+ expect(e.firstChild.hasAttribute('accentHeight')).toBe(false);
971
+ expect(e.firstChild.getAttribute('accent-height')).toBe('10');
972
+ });
973
974
itRenders('cased custom attributes', async render => {
975
const e = await render(<div fooBar="test" />);
src/renderers/dom/shared/utils/isCustomComponent.js
+20
-1
@@ -13,7 +13,26 @@
13
'use strict';
14
15
function isCustomComponent(tagName: string, props: Object) {
16
- return tagName.indexOf('-') >= 0 || typeof props.is === 'string';
16
+ if (tagName.indexOf('-') === -1) {
17
+ return typeof props.is === 'string';
18
+ }
19
+ switch (tagName) {
20
+ // These are reserved SVG and MathML elements.
21
+ // We don't mind this whitelist too much because we expect it to never grow.
22
+ // The alternative is to track the namespace in a few places which is convoluted.
23
+ // https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
24
+ case 'annotation-xml':
25
+ case 'color-profile':
26
+ case 'font-face':
27
+ case 'font-face-src':
28
+ case 'font-face-uri':
29
+ case 'font-face-format':
30
+ case 'font-face-name':
31
+ case 'missing-glyph':
32
+ return false;
33
+ default:
34
+ return true;
35
+ }
36
}
37
38
module.exports = isCustomComponent;