Add innerText and textContent to reservedProps

facebook · Sep 14, 2021 · af292bc · af292bc
1 parent 9bec8b1
commit af292bc
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
@@ -263,6 +263,32 @@ describe('DOMPropertyOperations', () => {
         .dispatchEvent(new Event('customevent', {bubbles: false}));
       expect(oncustomevent).toHaveBeenCalledTimes(1);
     });
+
+    it('innerHTML should not work on custom elements', () => {
+      const container = document.createElement('div');
+      ReactDOM.render(<my-custom-element innerHTML="foo" />, container);
+      const customElement = container.querySelector('my-custom-element');
+      expect(customElement.getAttribute('innerHTML')).toBe(null);
+      expect(customElement.hasChildNodes()).toBe(false);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('innerText should not work on custom elements', () => {
+      const container = document.createElement('div');
+      ReactDOM.render(<my-custom-element innerText="foo" />, container);
+      const customElement = container.querySelector('my-custom-element');
+      expect(customElement.getAttribute('innerText')).toBe(null);
+      expect(customElement.hasChildNodes()).toBe(false);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('textContent should not work on custom elements', () => {
+      const container = document.createElement('div');
+      ReactDOM.render(<my-custom-element textContent="foo" />, container);
+      const customElement = container.querySelector('my-custom-element');
+      expect(customElement.getAttribute('textContent')).toBe(null);
+      expect(customElement.hasChildNodes()).toBe(false);
+    });
   });
 
   describe('deleteValueForProperty', () => {

diff --git a/packages/react-dom/src/shared/DOMProperty.js b/packages/react-dom/src/shared/DOMProperty.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import {enableFilterEmptyStringAttributesDOM} from 'shared/ReactFeatureFlags';
+import {enableFilterEmptyStringAttributesDOM, enableCustomElementPropertySupport} from 'shared/ReactFeatureFlags';
 import hasOwnProperty from 'shared/hasOwnProperty';
 
 type PropertyType = 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -266,6 +266,9 @@ const reservedProps = [
   'suppressHydrationWarning',
   'style',
 ];
+if (enableCustomElementPropertySupport) {
+  reservedProps.push('innerText', 'textContent');
+}
 
 reservedProps.forEach(name => {
   properties[name] = new PropertyInfoRecord(