From c2122f89872be8c78460da46df835f7a93310851 Mon Sep 17 00:00:00 2001 From: Sebastian Markbage Date: Thu, 30 Mar 2023 16:37:06 -0400 Subject: [PATCH] Limit the meaning of "custom element" to not include `is` Effectively this means that you can't use custom properties/events, other than the ones React knows about on `is` extensions. This is unfortunate but there's too many paths that are forked in inconsistent ways. I think the solution is to let all React elements set unknown properties in the same way as this flag but that's a bigger change than this flag implies. Since `is` is not universally supported yet anyway, this doesn't seem like a huge loss. Attributes still work. --- .../src/server/ReactDOMServerFormatConfig.js | 2 +- .../src/shared/ReactDOMUnknownPropertyHook.js | 2 +- packages/react-dom-bindings/src/shared/isCustomElement.js | 2 +- .../__tests__/ReactDOMServerIntegrationAttributes-test.js | 8 +++++++- 4 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js index b48538bfdf083..4168b40cb7afc 100644 --- a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js +++ b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js @@ -2604,7 +2604,7 @@ export function pushStartInstance( ); } default: { - if (type.indexOf('-') === -1 && typeof props.is !== 'string') { + if (type.indexOf('-') === -1) { // Generic element return pushStartGenericElement(target, props, type); } else { diff --git a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js b/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js index 64dc7126ad6d4..e941899ab4d76 100644 --- a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js +++ b/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js @@ -308,7 +308,7 @@ function warnUnknownProperties(type, props, eventRegistry) { } export function validateProperties(type, props, eventRegistry) { - if (isCustomElement(type, props)) { + if (isCustomElement(type, props) || typeof props.is === 'string') { return; } warnUnknownProperties(type, props, eventRegistry); diff --git a/packages/react-dom-bindings/src/shared/isCustomElement.js b/packages/react-dom-bindings/src/shared/isCustomElement.js index f3e03e000030c..39d5d7fe187e0 100644 --- a/packages/react-dom-bindings/src/shared/isCustomElement.js +++ b/packages/react-dom-bindings/src/shared/isCustomElement.js @@ -9,7 +9,7 @@ function isCustomElement(tagName: string, props: Object): boolean { if (tagName.indexOf('-') === -1) { - return typeof props.is === 'string'; + return false; } switch (tagName) { // These are reserved SVG and MathML elements. diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js index 75c5dd361353a..bba88467587d1 100644 --- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js @@ -669,8 +669,14 @@ describe('ReactDOMServerIntegration', () => { } }); - itRenders('htmlFor attribute on custom elements', async render => { + itRenders('htmlFor property on is elements', async render => { const e = await render(
); + expect(e.getAttribute('htmlFor')).toBe(null); + expect(e.getAttribute('for')).toBe('test'); + }); + + itRenders('htmlFor attribute on custom elements', async render => { + const e = await render(); expect(e.getAttribute('htmlFor')).toBe('test'); expect(e.getAttribute('for')).toBe(null); });