diff --git a/packages/react-dom-bindings/src/shared/DOMProperty.js b/packages/react-dom-bindings/src/shared/DOMProperty.js index 4345b055ea85a..c071289a3bb54 100644 --- a/packages/react-dom-bindings/src/shared/DOMProperty.js +++ b/packages/react-dom-bindings/src/shared/DOMProperty.js @@ -10,6 +10,7 @@ import { enableFilterEmptyStringAttributesDOM, enableCustomElementPropertySupport, + enableNewBooleanProps, } from 'shared/ReactFeatureFlags'; import hasOwnProperty from 'shared/hasOwnProperty'; @@ -331,7 +332,7 @@ reservedProps.forEach(name => { }); // These are HTML boolean attributes. -[ +const htmlBooleanAttributes = [ 'allowFullScreen', 'async', // Note: there is a special case that prevents it from being written to the DOM @@ -346,7 +347,6 @@ reservedProps.forEach(name => { 'disableRemotePlayback', 'formNoValidate', 'hidden', - 'inert', 'loop', 'noModule', 'noValidate', @@ -359,7 +359,13 @@ reservedProps.forEach(name => { 'seamless', // Microdata 'itemScope', -].forEach(name => { +]; + +if (enableNewBooleanProps) { + htmlBooleanAttributes.push('inert'); +} + +htmlBooleanAttributes.forEach(name => { // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions properties[name] = new PropertyInfoRecord( name, diff --git a/packages/react-dom-bindings/src/shared/possibleStandardNames.js b/packages/react-dom-bindings/src/shared/possibleStandardNames.js index 6c06b47c64ac7..d2d90877b53d7 100644 --- a/packages/react-dom-bindings/src/shared/possibleStandardNames.js +++ b/packages/react-dom-bindings/src/shared/possibleStandardNames.js @@ -4,6 +4,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +import {enableNewBooleanProps} from 'shared/ReactFeatureFlags'; // When adding attributes to the HTML or SVG allowed attribute list, be sure to // also add them to this module to ensure casing and incorrect name @@ -82,7 +83,6 @@ const possibleStandardNames = { id: 'id', imagesizes: 'imageSizes', imagesrcset: 'imageSrcSet', - inert: 'inert', innerhtml: 'innerHTML', inputmode: 'inputMode', integrity: 'integrity', @@ -503,4 +503,8 @@ const possibleStandardNames = { zoomandpan: 'zoomAndPan', }; +if (enableNewBooleanProps) { + possibleStandardNames.inert = 'inert'; +} + export default possibleStandardNames; diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index e6f890e9992ed..1077e187ef857 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -183,6 +183,13 @@ export const enableFilterEmptyStringAttributesDOM = false; // https://github.com/facebook/react/issues/11347 export const enableCustomElementPropertySupport = __EXPERIMENTAL__; +// HTML boolean attributes need a special PropertyInfoRecord. +// Between support of these attributes in browsers and React supporting them as +// boolean props library users can use them as `
`. +// However, once React considers them as boolean props an empty string will +// result in false property i.e. break existing usage. +export const enableNewBooleanProps = __EXPERIMENTAL__; + // Disables children for