From 1a093e584ce50e2e634aa743e04f9cb8fc2b3f7d Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Tue, 28 Sep 2021 12:10:49 -0700
Subject: [PATCH] Emit warning when assigning to read only properties in client

---
 .../__tests__/DOMPropertyOperations-test.js   | 22 +++++++++++++++++++
 .../src/client/DOMPropertyOperations.js       | 14 ++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
index 199c746bb7754..8fff35bff19eb 100644
--- a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
+++ b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
@@ -289,6 +289,28 @@ describe('DOMPropertyOperations', () => {
       expect(customElement.getAttribute('textContent')).toBe(null);
       expect(customElement.hasChildNodes()).toBe(false);
     });
+
+    // @gate enableCustomElementPropertySupport
+    it('Assigning to read-only properties should emit warnings for custom elements', () => {
+      const readOnlyProperties = [
+        'isContentEditable',
+        'offsetParent',
+        'offsetTop',
+        'offsetLeft',
+        'offsetWidth',
+        'offsetHeight'
+      ];
+      for (const readOnlyProperty of readOnlyProperties) {
+        const container = document.createElement('div');
+        const props = {};
+        props[readOnlyProperty] = 'foo';
+        expect(() => {
+          ReactDOM.render(React.createElement('my-custom-element', props), container);
+        }).toErrorDev(
+          `Assigning to the read-only property \`${readOnlyProperty}\` won't have any effect on the element.`
+        );
+      }
+    });
   });
 
   describe('deleteValueForProperty', () => {
diff --git a/packages/react-dom/src/client/DOMPropertyOperations.js b/packages/react-dom/src/client/DOMPropertyOperations.js
index 13a144b282d5d..a30cfd77c71e9 100644
--- a/packages/react-dom/src/client/DOMPropertyOperations.js
+++ b/packages/react-dom/src/client/DOMPropertyOperations.js
@@ -176,6 +176,20 @@ export function setValueForProperty(
     }
   }
 
+  if (__DEV__ && enableCustomElementPropertySupport && isCustomComponentTag) {
+    const readOnlyProperties = [
+      'isContentEditable',
+      'offsetParent',
+      'offsetTop',
+      'offsetLeft',
+      'offsetWidth',
+      'offsetHeight'
+    ];
+    if (readOnlyProperties.includes(name)) {
+      console.error("Assigning to the read-only property `%s` won't have any effect on the element.", name);
+    }
+  }
+
   if (shouldRemoveAttribute(name, value, propertyInfo, isCustomComponentTag)) {
     value = null;
   }